一段js+html+css实现的loading图标效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <style type="text/css"> #dot,#dot u,#dot b,#dot i{overflow:hidden;} #dot {width:16px;height:16px;text-align:center;} #dot b,#dot i{display:block;background:#666666;} #dot u{margin:0px;padding:0px;width:4px;height:4px;float:left;} #dot b{height:1px;width:2px;margin-left:1px;} #dot i{height:2px;width:4px;} #dot #dot1,#dot #dot7{margin-left:2px;} #dot #dot1{padding-top:2px;} #dot #dot3,#dot #dot6{padding-top:2px;} #dot #dot4{padding-left:8px;} #mn{border:1px solid #9dd;padding:20px;} </style> <script> /* project : 模拟FireFox载入动画 By : Missde Date : 2006 Link : www.missde.cn */ var dotdiv= "<div id='dot'>" +"<u id='dot1'><b></b><i></i><b></b></u>" +"<u id='dot2'><b></b><i></i><b></b></u>" +"<u id='dot3'><b></b><i></i><b></b></u>" +"<u id='dot8'><b></b><i></i><b></b></u>" +"<u id='dot4'><b></b><i></i><b></b></u>" +"<u id='dot7'><b></b><i></i><b></b></u>" +"<u id='dot6'><b></b><i></i><b></b></u>" +"<u id='dot5'><b></b><i></i><b></b></u>" +"</div>"; function gID(str){ return document.getElementById(str); } function loadingdot(a){ if(a<=1 || a>8)a=1; loadingdot_a2=a-0+1; for(var i=8;i>=1;i--){ var d=loadingdot_a2-i; if(d<1)d+=8; gID("dot"+i).style.MozOpacity=(1.2-d/10); gID("dot"+i).style.filter="alpha(opacity=" +(120-d*10)+")"; gID("dot"+i).style.opacity=(1.2-d/10); } setTimeout("loadingdot(loadingdot_a2)",100); } function loading(){ gID("mn").innerHTML=dotdiv; loadingdot(1); } </script> </head> <body> <center><div id="mn"></div></center> <script>loading()</script> </body> </html>
这个纯属好玩了，个人感觉实用价值不高，不过思路还是不错的
