正在读取数据,页面载入中,请稍后...

自适应的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 文件,代码如下

该部分是隐藏区

登录后查看

该部分是隐藏区

完成,接下来是调用标签。

三、调用标签

http://你的域名/link.php?go=http://nidecms.com/

这些站长,总是喜欢折腾,然后,将链接加密起来,觉得这样显得高端。

四、PHP封装(链接加密版)

①、新建 link.php 文件,代码如下

该部分是隐藏区

登录后查看

该部分是隐藏区

完成,接下来是调用标签。

②、加密式的调用标签。

<a href="http://你的域名/link.php?go=<?php echo base64_encode('http://nidecms.com/'); ?>">全民博客</a>

自适应的HTML网页自动跳转页面代码 - 全民博客

这些站长,总是喜欢模仿,这种毫无新意的base64函数,加密和不加密都是一个样的。

本文结束

评论专区

发表评论

评论列表(无评论)