js物体链式运动

来源：互联网发布：算法工程师自学编辑：程序博客网时间：2024/05/21 06:39

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>动画</title><style>body{margin:0;padding:0;}ul,li{list-style:none;}ul li{width:200px;height:100px;background:yellow;margin-bottom:20px;border:4px solid #000;filter:alpha(opacity:30);opacity:0.3;}</style></head><body><ul><li id="li1"></li></ul></body></html>

<script type="text/javascript">window.onload=function(){var Li=document.getElementById('li1');Li.onmouseover=function(){startMove(Li,'width',400,function(){startMove(Li,'height',200,function(){startMove(Li,'opacity',100);});});}Li.onmouseout=function(){startMove(Li,'opacity',30,function(){startMove(Li,'height',100,function(){startMove(Li,'width',200);});});}}function startMove(obj,attr,iTarget,fn){clearInterval(obj.timer);obj.timer=setInterval(function(){var icur=0;if(attr=='opacity'){icur=parseFloat(getStyle(obj,attr))*100;}else{icur=parseInt(getStyle(obj,attr));}//算速度var speed=(iTarget-icur)/10;speed=speed>0?Math.ceil(speed):Math.floor(speed);//检测停止if(icur==iTarget){clearInterval(obj.timer);if(fn){fn();}}else{//alert(getStyle(obj,'opacity'));if(attr=='opacity'){obj.style.filter='alpha(opacity:'+(icur+speed)+')';obj.style.opacity=(icur+speed)/100;}else{obj.style[attr]=icur+speed+"px";}}},30);}function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];  //IE}else{return getComputedStyle(obj,false)[attr];   //火狐}}</script>

0 0