js实现同一页面多个不同运动效果的方法
本文实例讲述了js实现同一页面多个不同运动效果的方法。分享给大家供大家参考。具体分析如下:
要点一:
functiongetstyle(obj,name){ if(obj.currentStyle){ returnobj.currentStyle[name]; }else{ returngetComputedStyle(obj,false)[name]; } }
从样式表中根据id和属性名取值。
要点二:
if(attr=="opacity"){ cur=Math.round(parseFloat(getstyle(obj,attr))*100); }else{ cur=parseInt(getstyle(obj,attr)); }
如果设置的是透明度的值,因为有可能会是小数点,所以需要用parseFloat,然后有可能会有小数,用round方法四舍五入取整。
如果设置的非透明度值,用parseInt,可以只取数值部分
其它的注意点,前面几篇都有提到,此处不再赘述。
最后,上代码:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>无标题文档</title> <style> body,ul,li{margin:0;padding:0;} #runsli{width:80px;height:80px;background:#06c; list-style:none;margin:10px;border:1pxsolid#000; filter:alpha(opacity=30);opacity:0.3;} </style> <script> window.onload=function(){ varruns=document.getElementById("runs"); varruns_li=runs.getElementsByTagName("li"); runs_li[0].onmouseover=function(){ startrun(this,"width",300); } runs_li[0].onmouseout=function(){ startrun(this,"width",80); } runs_li[1].onmouseover=function(){ startrun(this,"height",300); } runs_li[1].onmouseout=function(){ startrun(this,"height",80); } runs_li[2].onmouseover=function(){ startrun(this,"fontSize",50); } runs_li[2].onmouseout=function(){ startrun(this,"fontSize",14); } runs_li[3].onmouseover=function(){ startrun(this,"opacity",100); } runs_li[3].onmouseout=function(){ startrun(this,"opacity",30); } } functionstartrun(obj,attr,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ varcur=0; if(attr=="opacity"){ cur=Math.round(parseFloat(getstyle(obj,attr))*100); }else{ cur=parseInt(getstyle(obj,attr)); } varspeed=(target-cur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==target){ clearInterval(obj.timer); }else{ if(attr=="opacity"){ obj.style.filter='alpha(opacity='+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; }else{ obj.style[attr]=cur+speed+"px"; } } },30); } functiongetstyle(obj,name){ if(obj.currentStyle){ returnobj.currentStyle[name]; }else{ returngetComputedStyle(obj,false)[name]; } } </script> </head> <body> <ulid="runs"> <listyle="top:0">1</li> <listyle="top:90px;">2</li> <listyle="top:180px;">3</li> <listyle="top:270px;">4</li> </ul> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。