HTML一個極其簡單實用的瀏覽器載入效果
阿新 • • 發佈：2018-12-23
需求分析：在wap/pc瀏覽器介面中，為了增強使用者的體驗效果，在進行資料操作的時候，通常需要一個載入效果來提示使用者等待，但是很多時候為了這麼一個效果回去引用一個外掛顯得相當冗餘，因此這裡提供一個方便的效果，在當前頁面就能做到提示效果，仿蘋果載入提示，快來試試吧！
程式碼呈現：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>載入效果demo</title> <!--引入jQuery--> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script> <style> #tipDiv{ display:none; position: absolute; left: 39%; top: 230px; z-index: 9999; background: #d9d9d9; padding: 10px; border-radius: 5px; } #tipInfo{ margin-top: 10px; } </style> </head> <body> <!--主要的div 使用的時候把這段引用到自己的介面中--> <div id="tipDiv"> <center><img style="width:25px;" src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R5-50.gif"></center> <div id="tipInfo"></div> </div> <script type="text/javascript"> //顯示提示 function showTip(info){ $('#tipInfo').html(info); $('#tipDiv').show(); } //初始載入提示 showTip('內容正在載入...'); //關閉提示 function closeTip(){ $('#tipDiv').hide(); } </script> </body> </html>