<head><title>链式运动</title><style>li{ width:200px; height:100px; background:red; float: none; left:0; top: 0; margin-bottom: 20px; list-style-type: none; filter: alpha(opacity:30); opacity: 0.3;}</style><script type="text/javascript">var oli=document.getElementsByTagName('li');window.onload=function(){for(i=0;i<oli.length;i++){ oli[i].timer=null; oli[i].onmouseover=function(){ startmove(this,"width",400,function(){ startmove(this,"opacity",100); }); } oli[i].onmouseout=function(){ startmove(this,"width",200,function(){ startmove(this,"opacity",30); }); }}}function getamt(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }function startmove(obj,attr,itarget,fn){ clearInterval(obj.timer); obj.timer=setInterval( function(){ var dqz=0; if(attr=="opacity"){ dqz=Math.round(parseFloat(getamt(obj,attr))*100); }else{ dqz=parseInt(getamt(obj,attr)); } var speed=(itarget-dqz)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(dqz == itarget){ clearInterval(obj.timer); if(fn){ fn(); } } else{ if (attr=="opacity") {obj.style.filter="alpha(opacity:"+(dqz+speed)+")"; obj.style.opacity=(dqz+speed)/100;} else{obj.style[attr]=dqz+speed+"px";} } },30);}</script></head><body><ul> <li></li> <li></li></ul></body>
添加回答
举报
0/150
提交
取消