我们经常在浏览网页的时候会看到数据在加载时,出现的LOADING提示。其实这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loading就在遮盖DIV层上展示出来,现在我们来动手实现一下。
1.当前页面:
<div class="current"><a href="#" onclick="showLoading()">Loading</a></div>
2.遮罩层:
<div id="over" class="over"></div>
3.Loading展示层:
<div id="layout" class="layout"><img src="http://files.jb51.net/file_images/article/201311/2013112931.gif" alt="" /></div>
整体代码:
<!DOCTYPE html> <html xmlns="http://www./1999/xhtml"> <head> <title></title> <style type="text/css"> .current a { font-size: 20px; }
.over { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f5f5f5; opacity:0.5; z-index: 1000; }
.layout { display: none; position: absolute; top: 40%; left: 40%; width: 20%; height: 20%; z-index: 1001; text-align:center; } </style> <script type="text/javascript"> function showLoading() { document.getElementById("over").style.display = "block"; document.getElementById("layout").style.display = "block"; } </script> </head> <body> <div class="current"><a href="#" onclick="showLoading()">Loading</a></div> <div id="over" class="over"></div> <div id="layout" class="layout"><img src="http://files.jb51.net/file_images/article/201311/2013112931.gif" alt="" /></div> </body> </html>
最终效果:
在网上还看到另外一种实现方式,感觉思路不错,就是利用JS不断的改变html标签的value值,达到加载提示的效果,根据他的思路我自己实现了下,代码如下:
<!DOCTYPE html> <html xmlns="http://www./1999/xhtml"> <head> <title></title> <!-- <script src="Scripts/jquery-1.8.2.js"></script>--> <style type="text/css"> #tb { width: 100%; height: 100%; line-height: 10px; }
#tb tr td { text-align: center; }
.progressbar { font-family: Arial; font-weight: bolder; color: gray; background-color: white; padding: 0px; border-style: none; }
.percent { font-family: Arial; color: gray; text-align: center; border-width: medium; border-style: none; } </style> <script type="text/javascript"> var bar = 0; var step = "||"; /* *第一种方式即 :$(document).ready(function(){.....}); */ //$(function () { // progress(); //});
/* *第二种方式 */ //window.onload = function () { // progress(); //}
/* *第三种方式模拟 $(document).ready(function(){.....}); */ (function () { var ie = !!(window.attachEvent && !window.opera); var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); var fn = []; var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); }; var d = document; d.ready = function (f) { if (!ie && !wk && d.addEventListener) return d.addEventListener('DOMContentLoaded', f, false); if (fn.push(f) > 1) return; if (ie) (function () { try { d.documentElement.doScroll('left'); run(); } catch (err) { setTimeout(arguments.callee, 0); } })(); else if (wk) var t = setInterval(function () { if (/^(loaded|complete)$/.test(d.readyState)) clearInterval(t), run(); }, 0); }; })();
document.ready(function () {
progress();
});
function progress() { bar = bar + 2; step = step + "||"; document.getElementById("percent").value = bar + "%"; document.getElementById("progressbar").value = step; if (bar <= 98) { setTimeout("progress()", 100); } } </script> </head> <body> <table id="tb"> <tr> <td> <input type="text" size="50" class="percent" id="percent" /></td> </tr> <tr> <td> <input type="text" size="50" class="progressbar" id="progressbar" /></td> </tr> </table> </body> </html>
最终效果:
|