如何制作网页的Loading效果
|
如何制作网页的Loading效果 解决思路 现在很多网站都用了 Loading 效果，为网页增色不少。不过，在网页中是不可能实现和 Flash 一样的真正的 Loading 效果的，只能模拟或者用近似的方法实现。 具体步骤： ■ 方法一：最简单是做一个加载页，然后在里面插入一个隐藏的iframe，iframe内所加载的地址就是Loading的目标网址，在页面加载完后直接转到目标网址。 代码示例： <script> var url="http://www.flash8.net" //要加载的目标页 var text="Loading......" //加载时显示的文字 function window.onload(){ location=url //网页加载后转到目标页 } //用iframe预载目标页 document.write(text+"<iframe src=\""+url+"\" style=\"display:none\"></iframe>") </script> 技巧：可将变量 url 的值 http://www.flash8.net 改为你的页面地址。 ■ 方法二：也可以直接显示一个加载页面，无任何预载动作。 代码示例： <div id=demo>Loading...</div> <script> var url="http://www.flash8.net" //要加载的目标页 //每500毫秒在id为demo的元素内的文字添加一个 ■ setInterval("demo.innerText+=’■’",500) setTimeout("location=url",5000) //5000毫秒后转到目标地址 </script> 注意：代码中的 demo 为对象自定义 ID，你可以自行定义，但脚本中的demo必须跟对象的ID一致。 提示：500 为每增加一个“■”相隔的毫秒数，5000 指定5000毫秒(即5秒)后转到目标地址。 ■ 方法三：从方法二中加一个颜色渐变的效果。 <div id=demo style="color:#494949">Loading...</div> <script> var i=69 var url="http://www.flash8.net" //要加载的目标页 function load(){ if(i<249){ i+=10 demo.innerText+="■" //每500毫秒在id为demo的元素内的文字添加一个 ■ //设置id为demo的元素的文字颜色向白色渐变 demo.style.color="rgb("+[i,i,i].join(",")+")" setTimeout("load()",500) //500毫秒后再次执行load()函数 } else setTimeout("location=url",1000) //1秒后转到目标页 } load() //运行 load 函数 </script> ■ 方法四：先设置文档为不可见，通过定时自加，不断改变状态栏的显示，以模拟下载进度效果，在页面加载完成后，重新设置定时器和变量num，使之更真实，在变量num自加到100后让文档显示并在状态栏显示"complete"。 代码示例： <script> //变量num相当于下载百分比，delay的值为改变状态栏信息的毫秒数 var num=0,delay=300 function window.onload(){ //页面加载完成后执行以下表达式 num = 90 //在页面加载完成不管num已自加到多少 delay = 5 } function loadState(){ if(num < 100){ //变量num小于100 num++ //num自加 //状态栏显示num的相关字符 window.status = "loaded:"+num+"% "+new Array(num).join("|") //delay毫秒后再次执行loadState()函数 setTimeout("loadState()",delay) } else { //如果num等于100，即认为页面加载完成 window.status = "complete" //状态栏显示"complete" with(document.body){ //用blendTrans滤镜渐显文档 filters.blendTrans.apply() style.display = "" filters.blendTrans.play() } } } loadState() </script> <body style="display:none;filter:blendTrans(duration=1)"> 特别提示 四种方法都没有实现真正的 Loading，只是模拟一个下载进度，到“进度”为100%时再跳转到目标页，或者先用 iframe 预载，加载完成后转到目标页。代码可以直接运行，效果分别如图 3.4、3.5、3.6、3.7 所示。 图 3.4 方法一的Loadign效果预览 图 3.5 方法二的Loadign效果预览 图 3.6 方法三的Loadign效果预览 图 3.7 方法四的Loadign效果预览 特别说明 本例中使用了对象的 innerText 属性来设置或获取对象内的文本内容，location 对象的默认属性 href 来跳转页面，window. 对象的status 属性来设置或获取页面状态栏的文本内容，style 对象的 color 属性来设置对象内的文本颜色，setInterval 和setTimeout 方法来设置计时器。Object.innerText设置或获取位于对象起始和结束标签内的文本。 1. location.href设置或获取整个 URL 为字符串，location 的默认属性为 href，所以可简写为location。 2. window.status设置或获取位于窗口底部状态栏的信息。 3. Object.style.color设置或获取对象文本的颜色。 4. 有关setInterval 和 setTimeout 的说明和区别请参考本部分问题26。
详情请查考:http://hi.baidu.com/eagle092/blog/item/dee58a08470cf839e824886d.html |