<!doctype html><html><head><meta charset="UTF-8"><title>Document</title><style>*{ margin: 0; padding:0;}div{ margin: 10px; float: left; width: 200px; height: 200px; background-color: red; filter: alpha(opacity:30); opacity: 0.3;}</style><script>window.onload=function() { var oDiv=document.getElementsByTagName("div"); for(var i=0;i<oDiv.legth;i++){ oDiv[i].alpha=30; //多物体运动时，清除定时器(每一个都定义就不会争) oDiv[i].onmouseover=function(){ startMove(this,100); } oDiv[i].onmouseout=function(){ startMove(this,30); } }}//var timer=null;//var alpha=30; //定义一个变量function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>iTarget){ speed=-10; }else{ speed=10; } if(obj.alpha==iTarget){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30) }</script></head><body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div></body></html>
添加回答
举报
0/150
提交
取消