<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 200px; height: 200px; background: red; filter: alpha(opacity: 30); opacity: 0.3; } </style> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("div1"); odiv.onmouseover=function(){ startMove(this,{width:400})? ? ? ? ? ? ? ? ? } odiv.onmouseout=function(){ startMove(this,{width:200})? ? ? ? ? ? ? ? ? } } function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ return getComputedStyle(obj,false)[name]; } } function startMove(obj,json,fnend){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var Bstop=true; for (var attr in json) { if(attr=="opacity"){ cur=Math.round(parseFloat(getStyle(obj,attr))*100) } else{ cur=parseInt(getStyle(obj,attr)) } } var speed=(json[attr]-cur)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) Bstop=false; if(attr=="opacity"){ obj.style.filter="alpha(opacity"+(speed+cur)+")"; obj.style.opacity=(speed+cur)/100 } else{ obj.style[attr]=speed+cur+"px" } if(Bstop){ clearInterval(obj.timer) if(fnend)fnend(); } }) } </script> </head> <body> <div id="div1"> </div> </body></html>
Bstop有關代碼里面這個的應用不太懂,if(cur!=json[attr]) Bstop=false;這個看不太懂
Youruncle
2016-08-17 11:23:06
