漂亮的thinkphp 跳转页封装示例
时间：2022-11-06 09:22:36|栏目：PHP代码|点击： 次
项目是要一点点按优先级进行优化的，现在到优化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>
效果如下：
