漂亮的thinkphp 跳转页封装示例

更新时间：2020-04-11 16:58:37 作者：startmvc

项目是要一点点按优先级进行优化的，现在到优化thinkphp的跳转页了。<?phpif(C('LAYOUT_ON'

项目是要一点点按优先级进行优化的，现在到优化thinkphp的跳转页了。


<?php
 if(C('LAYOUT_ON')) {
 echo '{__NOLAYOUT__}';
 }
?>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>跳转中</title>
 <style>
 .buffer{
 background-color: black;
 height: 100%;
 width: 60%;
 margin: auto;
 filter: alpha(Opacity=60);
 -moz-opacity: 0.6;
 opacity: 0.85;
 border-radius: 7px;
 }
 
 .buffer_tip{
 color: wheat;
 font-size: 30px;
 display: block;
 padding-top: 10px;
 text-align: center;
 }
 .spinner {
 margin: 16px auto 57px;
 width: 32px;
 height: 32px;
 position: relative;
 }
 
 .cube1, .cube2 {
 background-color: #67CF22;
 width: 30px;
 height: 30px;
 position: absolute;
 top: 0;
 left: 0;
 
 -webkit-animation: cubemove 1.8s infinite ease-in-out;
 animation: cubemove 1.8s infinite ease-in-out;
 }
 
 .cube2 {
 -webkit-animation-delay: -0.9s;
 animation-delay: -0.9s;
 }
 
 @-webkit-keyframes cubemove {
 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
 100% { -webkit-transform: rotate(-360deg) }
 }
 
 @keyframes cubemove {
 25% {
 transform: translateX(42px) rotate(-90deg) scale(0.5);
 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
 } 50% {
 transform: translateX(42px) translateY(42px) rotate(-179deg);
 -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
 } 50.1% {
 transform: translateX(42px) translateY(42px) rotate(-180deg);
 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
 } 75% {
 transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
 } 100% {
 transform: rotate(-360deg);
 -webkit-transform: rotate(-360deg);
 }
 }
 
 #href{
 color: wheat;
 font-size: 20px;
 }
 a:link{
 text-decoration:none;
 }
 </style>
</head>
<body>
 
<div class='buffer' id='buffer' >
 <span class='buffer_tip' id='buffer_tip' >
 <php>
 if(isset($message)) {
 echo $message;
 }else{
 if(!empty($error)) {
 echo $error;
 }else{
 echo '操作出现错误';
 } 
 }
 </php>
 <a id="href" href="<?php echo($jumpUrl); ?>" rel="external nofollow" >(<b id="wait"><?php echo($waitSecond); ?></b>s)</a>
 </span>
 <div class="spinner">
 <div class="cube1"></div>
 <div class="cube2"></div>
 </div>
</div>
 
<script type="text/javascript">
(function(){
var wait = document.getElementById('wait'),href = document.getElementById('href').href;
var interval = setInterval(function(){
 var time = --wait.innerHTML;
 if(time <= 0) {
 location.href = href;
 clearInterval(interval);
 };
}, 1000);
})();
</script>
</body>
</html>

效果如下：