网建动力

WEB前端开发群：17784629

Categories:

正在加载网页的进度条,加载完后，自动消失

提示：你可以先修改部分代码再运行。

————————————-

<html> <head> <style type="text/css"> /*Loader ----------------------------------------------*/ #loader_container { text-align:center; position:absolute; top:60%; width:100%; left: 0; } #loader { font-family:Tahoma, Helvetica, sans; font-size:11.5px; color: #abc; background-color:#000; padding:10px 0 16px 0; margin:0 auto; display:block; width:130px; border:1px solid #abc; text-align:left; z-index:2; } #loader_bg {background-color: #abc; position:relative; top:8px; left:8px; height:7px; width:113px; font-size:1px} #progress { height:5px; font-size:1px; width:1px; position:relative; top:1px; left:0px; background-color: #fff; } </style> <script type="text/javascript"> var t_id = setInterval(animate,20); var pos=0; var dir=2; var len=0; function animate() { var elem = document.getElementById('progress'); if(elem != null) { if (pos==0) len += dir; if (len>32 || pos>79) pos += dir; if (pos>79) len -= dir; if (pos>79 && len==0) pos=0; elem.style.left = pos; elem.style.width = len; } } function remove_loading() { this.clearInterval(t_id); var targelem = document.getElementById('loader_container'); targelem.style.display='none'; targelem.style.visibility='hidden'; } </script> </head> <body onLoad="remove_loading();"> <div id="loader_container" onclick="this.style.display='none'" title="点击关闭"> <div id="loader"> <div align="center">网页正在载入中 ...</div> <div id="loader_bg"><div id="progress"> </div></div> </div> </div> <img src="http://static.flickr.com/25/57001474_6d174fdce4_o_d.jpg" /> </body> </html>

提示：你可以先修改部分代码再运行。

————————

提示：你可以先修改部分代码再运行。

Posted in 前端特效.

Tagged with loading, 加载.

No comments

By yflintao – 2010年02月2日

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

« JS清空代码防止查看源代码快过年了，给大家封装个选项卡js，大家新年好啊 »

2010年九月
一	二	三	四	五	六	日
« 八
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Proudly powered by WordPress and Carrington.

Carrington Theme by Crowd Favorite

正在加载网页的进度条,加载完后，自动消失

0 Responses

分类目录

最近文章

最近评论

链接表

站点统计哦！~

正在加载网页的进度条,加载完后，自动消失

0 Responses

Subscribe

分类目录

标签

最近文章

最近评论

链接表

站点统计哦！~