当前位置：首页 > CMS教程 > Thinkphp > 列表

漂亮的thinkphp 跳转页封装示例

发布:smiling　来源: PHP粉丝网　添加日期：2022-01-05 14:30:31　浏览: 评论：0　

今天小编就为大家分享一篇漂亮的thinkphp 跳转页封装示例，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧。

项目是要一点点按优先级进行优化的，现在到优化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(!emptyempty($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>