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