漂亮的thinkphp 跳转页封装

创建时间：2017-02-07 投稿人：浏览次数：2475

项目是要一点点按优先级进行优化的，现在到优化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); ?>">(<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>

动画效果

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。

热门文章: php如何正则提取指定[]中的...; PHP 如何给常量赋值变量; Thinkphp 使用原生类; 漂亮的thinkphp 跳转页封装 ...

最新文章: Thinkphp 使用原生类; PHP 如何给常量赋值变量; php如何正则提取指定[]中的...; thinkphp 同时更新多条数据 ...