jquery-jquery.preloader頁面預載入外掛
阿新 • • 發佈：2018-11-23
參考文件http://www.htmleaf.com/jQuery/Layout-Interface/201607263781.html
* 載入js:
<script src="jquery/jquery-3.2.1.min.js"></script> <script src="jquery/jquery.preloader.min.js"><script> <script type="text/javascript"> $(window).preloader({ delay: 1000 }); </script>
html:
<div id="preloader">
內容
</div>
CSS:
<style> #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 10000; } </style>
例項：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery預載入</title> <script src="jquery/jquery-3.2.1.min.js"></script> <script src="jquery/jquery.preloader.min.js"></script> <style> #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 10000; } .spinner { position:relative; width: 150px; height:50px; text-align: center;left: 50%; top: 50%; margin:-25px 0 0 -75px; } .spinner > div { width: 20px; height: 20px; background-color: #e6f5fd; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } </style> </head > <body> <div class="announcement"> <p class="p1"> 1人收藏 </p> </div> <div id="preloader"> <!--css中只要求preloader為fixed，即可實現預載入效果--> <div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> </div> <!--JS中要求下列程式碼初始化preloader--> <script type="text/javascript"> $(window).preloader({ delay: 1000 }); </script> </body> </html>