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程序设计有所帮助。