404頁面賞析
阿新 • • 發佈：2018-06-09
跳轉 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"View Code> <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>
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頁面賞析