<!DOCTY html><html> <head> <meta charset="UTF-8"> <title>任意属性/链式运动</title> <style type="text/css"> body,div{ margin:0; padding:0;} #div1{ width:200px; height:200px; border:1px solid yellow; background-color:blue; } #div2{ width:200px; height:200px; border:1px solid green; background:red; } </style> <script type="text/javascript"> window.onload=function(){ //var tags=document.getElementsByTagName('div'); var mId=document.getElementById('div1'); /*for(var i=0;i<tags.length;i++){ tags[i].timer=null; }*/ mId.onmouseover=function(){ startmove(this,'width',400);} mId.onmouseout=function(){ startmove(this,'width',200);} } function getStyle(obj,attr){ var myStyle=null; if(obj.currentStyle){ myStyle=obj.currentStyle[attr]; }else{ myStyle=getComputedStyle(obj,null)[attr]; } //attr=='opacity'?myStyle=parseInt(parseFloat(myStyle)*100):myStyle=parseInt(myStyle); return myStyle; } var speed=0; function startmove(obj,attr,target){ window.clearInterval(obj.timer); obj.timer=window.setInterval(function(){ var att=getStyle(obj,attr); speed=parseInt((target-att))/20; speed>0?speed=Math.ceil(speed):speed=Math.floor(speed); if(obj.att==obj.target){ window.clearInterval(obj.timer); /*if(fn){fn()} } else{ if(attr=='opacity'){ obj.style.opacity=(att+speed)/100; console.log(obj.style.opacity); obj.style.filter='alpha:(opacity:'+att+speed+')'; }*/ }else{obj.style[attr]=att+speed+'px';} },200); } </script> </head> <body> <div id="div1" > 333 </div> <div id="div2"> 222 </div> </body></html>
添加回答
举报
0/150
提交
取消