1. 程式人生 > >404頁面賞析

404頁面賞析

跳轉 depth func eset cli parallax index gif adp

1、daocloud 自適應404

技術分享圖片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://dn-daoerror-page.qbox.me/bower_components/normalize-css/normalize.css">
        <link rel="stylesheet" href="https://dn-daoerror-page.qbox.me/styles/css/main.css"
> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://dn-daoerror-page.qbox.me/bower_components/jquery/dist/jquery.min.js"></script> <script src="https://dn-daoerror-page.qbox.me/bower_components/parallax/deploy/jquery.parallax.js"
></script> </head> <body> <div id="container" class="error_404"> <ul id="scene"> <li class="layer" data-depth="0.10"><div class="star diamond"></div></li> <li class="layer" data-depth="0.30"
><div class="star dot"></div></li> <li class="layer" data-depth="0.50"><div class="star sparkle"></div></li> <li class="layer" data-depth="0.05"><div class="lighthouse"></div></li> <li class="layer" data-depth="0.20"><div class="wave dark-blue depth-20"></div></li> <li class="layer" data-depth="0.40"><div class="wave medium-blue depth-40"></div></li> <li class="layer" data-depth="0.60"><div class="wave light-blue depth-60"></div></li> <li class="layer" data-depth="0.00"> <div class="error-message"> <p>肆零肆,你見,或者不見,他就在這裏。不悲,不喜。</p> <div class="button"><a href="https://www.daocloud.io">回到首頁</a></div> </div> </li> </ul> </div> </body> <script type="text/javascript"> $(#scene).parallax({ invertX: false, invertY: false, limitX: false, limitY: false, scalarX: 10, scalarY: 8, frictionX: 0.5, frictionY: 0.5 }); </script> </html>
View Code

2、鳥雲自動跳轉404

技術分享圖片
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>該頁面不存在</title>
    <link rel="stylesheet" href="https://www.niaoyun.com//template/Error/404/css/reset.css"/>
    <link rel="stylesheet" href="https://www.niaoyun.com//template/Error/404/css/404.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="auto">
    <div class="container">
        <div class="settings">
            <i class="icon"></i>
            <h4>很抱歉!沒有找到您要訪問的頁面!</h4>
            <p><span id="num">5</span> 秒後將自動跳轉到首頁</p>
            <div>
                <a href="/" title="返回首頁">返回首頁</a>
                <a href="javascript:;" title="上一步" id="reload-btn">上一步</a>
            </div>
        </div>
    </div>
</div>
<script>
    //倒計時跳轉到首頁的js代碼
    var $_num=$("#num");
    var num=parseInt($_num.html());
    var numId=setInterval(function(){
        num--;
        $_num.html(num);
        if(num===0){
            //跳轉地址寫在這裏
            window.location.href="/Home/Index/index.html";
        }
    },1000);
    //返回按鈕單擊事件
    var reloadPage = $("#reload-btn");
    reloadPage.click(function(e){
        window.history.back();
    });
</script>
</body>
</html>
View Code

404頁面賞析