喜欢捣鼓网站，还喜欢...经常羡慕别人，觉得别人写的代码。优秀、简洁、优雅、高端、大气、上档次、不一样，其实说白了，都是懒的锅，就是想白嫖。这不，又看到一款好看的特效，绝对要收藏，一款自适应的HTML网页自动跳转页面代码。
一、HTML代码
HTML
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
- <title>加载中，请稍候...</title>
- <style type="text/css">
- body{background:#fff}
- .dqhk{position:fixed;animation:ball-s .5s 0s ease-out;top:-60px;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center}
- .qjdh{transform:scale(1) translateY(-30px)}
- .qjdh>div:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}
- .qjdh>div:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}
- .qjdh>div{position:absolute;top:0;left:-30px;margin:2px;margin:0;width:15px;width:60px;height:15px;height:60px;border-radius:100%;background-color:#ff3cb2;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:ball-scale-multiple 1s .5s linear infinite;animation:ball-scale-multiple 1s .5s linear infinite}
- .lohg{position:fixed;top:60px;left:0;bottom:0;color: #f156b4;animation:ball-s2 .8s cubic-bezier(0.36, 0.29, 0.62, 1.36);right:0;display:flex;align-items:center;justify-content:center;}
- @-webkit-keyframes ball-scale-multiple{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}
- 5%{opacity:1}
- to{-webkit-transform:scale(1);transform:scale(1)}
- }@keyframes ball-scale-multiple{0%,to{opacity:0}
- 0%{-webkit-transform:scale(0);transform:scale(0)}
- 5%{opacity:1}
- to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
- }@keyframes ball-s{0%,to{opacity:0;transform:scale(0)}
- to{opacity:1;transform:scale(1)}
- }@keyframes ball-s2{0%{opacity:0}
- 30%{opacity:0}
- to{opacity:1}
- }
- </style>
- <script type="text/javascript">
- //页面计时
- var num = 1;
- function Trect() {
- num++;
- document.getElementById('num').innerHTML = num;
- }
- setInterval('Trect()', 1000);
- //禁止其他网站使用我们的跳转页面
- function link() {
- var MyHOST = new RegExp('nidecms.com');
- if (!MyHOST.test(document.referrer)) {
- location.href = 'http://' + MyHOST;
- }
- location.href = 'http://nidecms.com/';
- }
- //延时1S跳转，可自行修改延时时间
- setTimeout(link,1000);
- //延时30S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
- Timeout(function () {
- window.opener = null;
- window.close();
- },30000);
- </script>
- </head>
- <body>
- <div class="dqhk">
- <div class="qjdh">
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <div class="lohg">加载中，请稍候...<div id="num">1</div>秒</div>
- </body>
- </html>
运行试下，代码就是这么简单，当然，这个代码还能再简洁，因为，原站是有在线支付的，所以，也会考虑到卡屏问题。
二、PHP封装(链接不加密)
与《解决PHP网页跳转新页面空白问题》和《分享一个好看的网站跳转页面代码》一样，但PHP的写法也是多样，两种封装方式，根据自己的需求封装，下面我分享一种我自己的写法。新建 link.php 文件，代码如下
完成，接下来是调用标签。
三、调用标签
Source Code
- http://你的域名/link.php?go=http://nidecms.com/
这些站长，总是喜欢折腾，然后，将链接加密起来，觉得这样显得高端。
四、PHP封装(链接加密版)
①、新建 link.php 文件，代码如下
完成，接下来是调用标签。
②、加密式的调用标签。
Source Code
- <a href="http://你的域名/link.php?go=<?php echo base64_encode('http://nidecms.com/'); ?>">全民博客</a>
这些站长，总是喜欢模仿，这种毫无新意的base64函数，加密和不加密都是一个样的。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）