当前位置： 正文

WordPress纯代码外链跳转效果的3款样式免费分享

2020-03-29 技术圈 1.46k

前面给大家讲了WordPress怎么利用纯代码实现WordPress的外链跳转效果，今天给大家分享几款跳转样式。

外链跳转之QQ邮箱跳转页面样式

1、首先你可以参照 WordPress纯代码外链跳转效果的实现  这篇文章先设置好跳转效果。

2、将 GO 跳转页面的 HTML 代码（PHP 版本为例进行说明）改为类似 QQ 邮箱的跳转页面代码.

将以下代码保存为go.php替换上文根目录中的go.php

<?php
if(strlen($_SERVER['REQUEST_URI']) > 255 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
//通过 QUERY_STRING 取得完整的传入数据，然后取得 url=之后的所有值，兼容性更好
$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]);
//此处可以自定义一些特别的外链，不需要可以删除以下 5 行
if($t_url=="quanbaike" ) {
$t_url="http://www.quanbaike.com";
} elseif($t_url=="baidu") {
$t_url="https://www.baidu.com/";
}
//数据处理
if(!empty($t_url)) {
//判断取值是否加密
if ($t_url == base64_encode(base64_decode($t_url))) {
$t_url = base64_decode($t_url);
}
//对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i',$t_url,$matches);
if($matches){
$url=$t_url;
$title='页面加载中,请稍候...';
} else {
preg_match('/\./i',$t_url,$matche);
if($matche){
$url='http://'.$t_url;
$title='页面加载中,请稍候...';
} else {
$url = 'http://'.$_SERVER['HTTP_HOST'];
$title='参数错误，正在返回首页...';
}
}
} else {
$title = '参数缺失，正在返回首页...';
$url = 'http://'.$_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="robots" content="noindex, nofollow" />
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
//禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {
location.href="http://" + MyHOST;
}
}
//延时 2S 跳转，可自行修改延时时间
setTimeout(link_jump, 1000);
//延时 50S 关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style>body{margin:0;padding:0 30px;background:#fff;font-size:12px}img{border:none}a{text-decoration:none;cursor:pointer;outline:0}a:hover{text-decoration:underline}a,a:link,a:visited{color:#1e5494}a.btn_blue:focus{border-color:#93d4fc;box-shadow:0 0 5px #60caff}a.btn_blue{display:inline-block;padding:6px 25px;margin:0;font-size:14px;font-weight:700;text-align:center;border-radius:3px;border:1px solid #0d659b;color:#fff;color:#fff!important;background-color:#238aca;background:-moz-linear-gradient(top,#238aca,#0074bc);background:-webkit-linear-gradient(top,#238aca,#0074bc);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#238aca', endColorstr='#0074bc');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#238aca', endColorstr='#0074bc')"}a.btn_blue:hover{text-decoration:none;background-color:#238aca;background:-moz-linear-gradient(top,#2a96d8,#0169a9);background:-webkit-linear-gradient(top,#2a96d8,#0169a9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a96d8', endColorstr='#0169a9');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a96d8', endColorstr='#0169a9')"}a.btn_blue:active{background-color:#238aca;background:-moz-linear-gradient(top,#0074bc,#238aca);background:-webkit-linear-gradient(top,#0074bc,#238aca);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0074bc', endColorstr='#238aca');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0074bc', endColorstr='#238aca')";outline:0}.remind_block{overflow:hidden}.remind_block .remind_content{overflow:hidden}.remind_block .remind_title{margin-bottom:10px;padding-top:3px;font-weight:700;font-size:20px;font-family:"Microsoft YaHei","lucida Grande",Verdana}.remind_block .remind_detail{line-height:1.5;font-size:16px;color:#535353}.warning .remind_title{color:#16a085}.container{max-width:640px;margin:0 auto;padding-top:25px}.header{margin-bottom:5px}.footer{margin-top:18px;text-align:center;color:#a0a0a0;font-size:10px}.content{border:1px solid #bbb;box-shadow:0 0 3px #d4d4d4}.c-container{padding:30px}.c-footer{padding:10px 15px;background:#f1f1f1;border-top:1px solid #bbb;overflow:hidden}.c-footer-a1,.c-footer-a2{float:left}.c-footer-a2{margin:8px 0 0 15px}.safety-url{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #dfdfdf;word-wrap:break-word;word-break:break-all}</style>
</head>
<body>
<div class="container">
<div class="header">
<img width="133" height="50" src="http://94wz.top/img/logo.png">
</div>
<div class="content">
<div class="c-container warning">
<div id="remind_block" class="remind_block" style="height: 260px;">
<div class="remind_content">
<div class="remind_title">
您将要访问
</div>
<div class="remind_detail">
<div class="safety-url">
<?php echo $url;?>
</div>
<span style="color:#CC0000;font-weight:800;">温馨提示:</span><br/>该网页不属于 “王子驿站 www.94wz.top”所有，我们无法确认该网页是否安全，它可能包含未知的安全隐患，请注意保护好个人信息！
</div>
</div>
</div>
</div>
</div>
<div class="c-footer">
<a href="<?php echo $url;?>" rel="nofollow" class="c-footer-a1 btn_blue">继续访问</a><a class="c-footer-a2" href="http://94wz.top/" rel="nofollow">返回主页</a>
</div>
</div>
<div class="footer">Copyright © 王子驿站 94wz.top</div>
</body>
</html>

注意：记得将以上代码的 logo 图片地址、返回主页地址和版权说明的王子驿站更改为自己站点的即可。

外链跳转效果样式之旋转倒计时

制作go页面跳转，然后将以下代码生成go.php替换上文中的go.php即可。

<?php
/**
 * 自动跳转页面
 * @copyright (c) Emlog All Rights Reserved
 */
//自定义跳转地址
$cars = array(
    array("quanbaike",'http://94wz.top/'),
    array("quanbaike",'http://94wz.top/'),
 );

if(strlen($_SERVER['REQUEST_URI']) > 384 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64")) {
    @header("HTTP/1.1 414 Request-URI Too Long");
    @header("Status: 414 Request-URI Too Long");
    @header("Connection: Close");
    @exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
$t_url = htmlspecialchars(preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]));

//此处可以自定义一些特别的外链，不需要可以删除以下5行
foreach($cars as $k=>$val){
    if($t_url==$val[0] ) {
        $t_url = $val[1];
        $t_vip = 1;
    }
}
 
//数据处理
if(!empty($t_url)) {
    //判断取值是否加密
    if ($t_url == base64_encode(base64_decode($t_url))) {
        $t_url = base64_decode($t_url);
    }
 //对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i',$t_url,$matches);
if($matches){
    $url=$t_url;
    $title='页面加载中,请稍候...';
} else {
    preg_match('/\./i',$t_url,$matche);
    if($matche){
        $url='http://'.$t_url;
        $title='页面加载中,请稍候...';
    } else {
        $url = 'http://'.$_SERVER['HTTP_HOST'];
        $title='参数错误，正在返回首页...';
    }
}
} else {
    $title = '参数缺失，正在返回首页...';
    $url = 'http://'.$_SERVER['HTTP_HOST'];
}
?>
<html>
<!--
@name:aeink goto
@description:王子驿站跳转页面
@author:王子驿站
@time:2017-05-20
@copyright:王子驿站
@author url:http://www.94wz.top/
@ps:你想删我也拦不住看你自觉性吧！！
-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta name="robots" content="noindex, nofollow" />
    <noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
    <meta charset="UTF-8">
<!--[if IE 8]>
    <style>
        .ie8 .alert-circle,.ie8 .alert-footer{display:none}.ie8 .alert-box{padding-top:75px}.ie8 .alert-sec-text{top:45px}
    </style>
<![endif]-->

    <title><?php echo $title;?></title>
    <style>
        body{margin:0;padding:0;background:#E6EAEB;font-family:Arial,'微软雅黑','宋体',sans-serif}.main{position:absolute;left:calc(50% - 200px);top:calc(50% - 13em)}.alert-box{display:none;position:relative;margin:auto;padding:180px 85px 22px;border-radius:10px 10px 0 0;background:#FFF;box-shadow:5px 9px 17px rgba(102,102,102,.75);width:286px;color:#FFF;text-align:center}.alert-box p{margin:0}.alert-circle{position:absolute;top:-50px;left:111px}.alert-sec-circle{stroke-dashoffset:0;stroke-dasharray:735;transition:stroke-dashoffset 1s linear}.alert-sec-text{position:absolute;top:11px;left:190px;width:76px;color:#000;font-size:68px}.alert-sec-unit{font-size:34px}.alert-body{margin:35px 0}.alert-head{color:#242424;font-size:28px}.alert-concent{margin:25px 0 14px;color:#7B7B7B;font-size:18px}.alert-concent p{line-height:27px}.alert-btn{display:block;border-radius:10px;background-color:#4AB0F7;height:55px;line-height:55px;width:286px;color:#FFF;font-size:20px;text-decoration:none;letter-spacing:2px}.alert-btn:hover{background-color:#6BC2FF}.alert-footer{margin:0 auto;height:42px;width:120px}.alert-footer-icon{float:left}.alert-footer-text{float:left;border-left:2px solid #EEE;padding:3px 0 0 5px;height:40px;color:#0B85CC;font-size:12px;text-align:left}.alert-footer-text p{color:#7A7A7A;font-size:22px;line-height:18px}
    </style>
</head>
<body class="ie8" style="">
<div class="main">
    <div id="js-alert-box" class="alert-box" style="display:block">
        <svg class="alert-circle" width="234" height="234"><circle cx="117" cy="117" r="108" fill="#FFF" stroke="#43AEFA" stroke-width="17"></circle><circle id="js-sec-circle" class="alert-sec-circle" cx="117" cy="117" r="108" fill="transparent" stroke="#F4F1F1" stroke-width="18" transform="rotate(-90 117 117)" style="stroke-dashoffset:-514px"></circle><text class="alert-sec-unit" x="100" y="172" fill="#BDBDBD">秒</text></svg>
        <div id="js-sec-text" class="alert-sec-text">
        3
        </div>
        <div class="alert-body">
            <div id="js-alert-head" class="alert-head">
            <?php echo $title;?>
            </div>
            <div class="alert-concent">
            <p>我很努力，愿劳有所得</p>
            </div>
            <a id="js-alert-btn" class="alert-btn" href="<?php echo $url;?>">立即前往</a>
        </div>
        <div class="alert-footer clearfix">
            <svg width="46px" height="42px" class="alert-footer-icon"><circle fill-rule="evenodd" clip-rule="evenodd" fill="#7B7B7B" stroke="#DEDFE0" stroke-width="2" stroke-miterlimit="10" cx="21.917" cy="21.25" r="17"></circle><path fill="#FFF" d="M22.907,27.83h-1.98l0.3-2.92c-0.37-0.22-0.61-0.63-0.61-1.1c0-0.71,0.58-1.29,1.3-1.29s1.3,0.58,1.3,1.29 c0,0.47-0.24,0.88-0.61,1.1L22.907,27.83z M18.327,17.51c0-1.98,1.61-3.59,3.59-3.59s3.59,1.61,3.59,3.59v2.59h-7.18V17.51z M27.687,20.1v-2.59c0-3.18-2.59-5.76-5.77-5.76s-5.76,2.58-5.76,5.76v2.59h-1.24v10.65h14V20.1H27.687z"></path><circle fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" cx="35.417" cy="10.75" r="6.5"></circle><polygon fill="#7B7B7B" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="35.417,12.16 32.797,9.03 31.917,10.07 35.417,14.25 42.917,5.29 42.037,4.25 "></polygon></svg>
            <div class="alert-footer-text">
                <p>secure</p>安全加密
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
function alertSet(e) {
    document.getElementById("js-alert-box").style.display = "block", document.getElementById("js-alert-head").innerHTML = e;
    var t = 5,
        n = document.getElementById("js-sec-circle");
    document.getElementById("js-sec-text").innerHTML = t, setInterval(function() {
        //禁止其他网站调用此跳转
        //var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
        //if (!MyHOST.test(document.referrer)) {
        // location.href="http://" + MyHOST;
        //}
        if (0 == t) location.href = "<?php echo $url;?>";
        else {
            t -= 1, document.getElementById("js-sec-text").innerHTML = t;
            var e = Math.round(t / 5 * 735);
            n.style.strokeDashoffset = e - 735
        }
    }, 970)
}
</script>
<script>alertSet("<?php echo $title;?>");</script>
</body>
</html>

外链跳转效果之旋转沙漏加载样式

制作go页面跳转，然后将以下代码生成go.php替换上文中的go.php即可。

<?php 
/**
 * Modify by 王子驿站.
 * Site: www.94wz.top
 * Date: 2017-05-09
 */if(strlen($_SERVER['REQUEST_URI']) > 384 ||
    strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]);
  
//此处可以自定义一些特别的外链，不需要可以删除以下5行
if($t_url=="quanbaike" ) {
   $t_url="http://94wz.top";
} elseif($t_url=="quanbaike") {
   $t_url="http://www.94wz.top/";
}
  
//数据处理
if(!empty($t_url)) {
    //判断取值是否加密
    if ($t_url == base64_encode(base64_decode($t_url))) {
        $t_url =  base64_decode($t_url);
    }
    //对取值进行网址校验和判断
    preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i',$t_url,$matches);
if($matches){
    $url=$t_url;
    $title='页面加载中,请稍候...';
} else {
    preg_match('/\./i',$t_url,$matche);
    if($matche){
        $url='http://'.$t_url;
        $title='页面加载中,请稍候...';
    } else {
        $url = 'http://'.$_SERVER['HTTP_HOST'];
        $title='参数错误，正在返回首页...';
    }
}
} else {
    $title = '参数缺失，正在返回首页...';
    $url = 'http://'.$_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow" />
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
    //禁止其他网站使用我们的跳转页面
    var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
    if (!MyHOST.test(document.referrer)) {
         location.href="http://" + MyHOST;
    }
    location.href="<?php echo $url;?>";
}
//延时1S跳转，可自行修改延时时间
setTimeout(link_jump, 1000);
//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style type="text/css">
body{background:#555}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:45%;left:50%;margin-left:-100px;margin-top:2px;color:#000;letter-spacing:1px;font-size:20px;font-family:Arial}.spinner{position:absolute;top:45%;left:50%;display:block;margin-left:-160px;width:1px;height:1px;border:20px solid rgba(255,0,0,1);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}
</style>
</head>
<body>
<div class="loading">
  <div class="spinner-wrapper">
    <span class="spinner-text">王子驿站正在为您努力加载中，请稍候...</span>
    <span class="spinner"></span>
  </div>
</div>
</body>
</html>

注意：请把以上代码中的王子驿站换成你的站点名称哦。个人认为这个 GO 跳转页面不单单适用于 WordPress 站点，应该也是适用于 ZBlog 站点的，所以有需要的博主站长可以自行参考折腾试试。

内容查看
查看价格免费
客服微信：wzsdream，添加请备注王子驿站！
原文链接：http://94wz.top/2290.html，转载请注明出处。
赏 0

猜你喜欢

宝塔一键安装Alist教程
技术圈

使用宝塔一键安装Alist教程 一开始一直使用手动安装，一直出各种错误。所以我还是...
2024-10-13 160
Alist网盘美化常用代码V3专用
技术圈

<!-- 自定义壁纸&文件列表透明30% --> <style> .hope-ui-light{...
2024-06-12 452
Docker挂机7*24小时拉下行
技术圈

前言 此教程仅用于分享Docker容器镜像，只可学习使用，不得用于其他违反有关规定...
2024-04-06 688
玩客云Armbian DDNS+IPv6
技术圈

Armbian安装DDNS-GO mkdir -p /opt/ddns-go docker run -d --name ddns-go --res...
2024-04-05 599
simcitybuildit判断有没有进小黑屋的方法
技术圈

模拟城市分为国际服和国内服。其中，国内服由蜂巢2017年初取得代理资格，我们...
2024-03-28 609
分享一个IDM自动注册脚本，通杀官网最新版
技术圈

idm官网：https://www.internetdownloadmanager.com/ 使用方法： 1、进官...
2024-02-27 704

评论0

取消

首页 发现 VIP 客服 我的
显示验证码
没有账号？注册  忘记密码？