喜欢捣鼓网站，还喜欢...经常羡慕别人，觉得别人写的代码。优秀、简洁、优雅、高端、大气、上档次、不一样，其实说白了，都是懒的锅，就是想白嫖。这不，又看到一款好看的特效，绝对要收藏，一款自适应的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 文件，代码如下
完成，接下来是调用标签。
三、调用标签
http://你的域名/link.php?go=http://nidecms.com/
这些站长，总是喜欢折腾，然后，将链接加密起来，觉得这样显得高端。
四、PHP封装(链接加密版)
①、新建 link.php 文件，代码如下
完成，接下来是调用标签。
②、加密式的调用标签。
<a href="http://你的域名/link.php?go=<?php echo base64_encode('http://nidecms.com/'); ?>">全民博客</a>这些站长，总是喜欢模仿，这种毫无新意的base64函数，加密和不加密都是一个样的。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）