首页> 网页特效> 页面载入时的进度条效果的实现

页面载入时的进度条效果的实现

时间：2009-06-20 15:46:13 作者：互联网

网页特效实例代码，一张图片实现的鼠标超酷翻转效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<span class="visiblesaf0">http://ww***.org/TR/html4/loose.dtd</span>"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>一张图片实现的超酷效果downcodes.com</title> <style type="text/css">  </style> <script language="javascript"> <span class="visiblesaf1">wi***w.onload=function</span>(){ var <span class="visiblesaf2">t=***ument.getElementsByTagName</span>('table')[0]; var <span class="visiblesaf3">cs***rows</span>[1].cells,<span class="visiblesaf4">ct***rows</span>[0].cells; for(var i=0;i<<span class="visiblesaf5">cs***ngth</span>;i++) cssAni(cs[i],ct[i],7); } function cssAni(osrc,otarget,num,duration){ //////// //IE only //by mozart0, 2007.06.09 //////// var t=null,c=1,d=0,n=0,<span class="visiblesaf6">i=***h.floor</span>((duration||300)/num); var <span class="visiblesaf7">s=***rget.className.replace</span>(/.$/,''),r=/over/; <span class="visiblesaf8">os***onmouseover=osrc.onmouseout=function</span>(e){ n=r.test((e||event).type)?1:-1; if(!t) t=setInterval(function(){ if((c==1||c==num)&&((d==n||c+n<1)||!(d=n))) return clearInterval(t),t=null; <span class="visiblesaf9">ot***et.className=s</span>+(c+=d); },i); }; } </script> </head> <body> 鼠标指向字符A、B、C、D、E、F、G。你就可以看到效果了!!哈哈 <table> <tr class='icon'> <td class='a f1'></td> <td class='b f1'></td> <td class='c f1'></td> <td class='d f1'></td> <td class='e f1'></td> <td class='f f1'></td> <td class='g f1'></td> </tr> <tr class='capt'> <td><a href='#;'>A</a></td> <td><a href='#;'>B</a></td> <td><a href='#;'>C</a></td> <td><a href='#;'>D</a></td> <td><a href='#;'>E</a></td> <td><a href='#;'>F</a></td> <td><a href='#;'>G</a></td> </tr> </table> </body> </html>

特色栏目

游戏频道

专题合集

页面载入时的进度条效果的实现

相关应用

网页特效教程

网页特效管理系统

热门文章

猜你喜欢