function startMove(obj,json,fn){ //var oDiv=document.getElementById('div1'); clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json ) { var iSpeed=0; var icur=0; if(attr=='opacity') { icur=parseInt(parseFloat(getStyle(obj,attr))*100) } else { icur=parseInt(getStyle(obj,attr)) } iSpeed=(json[attr]-icur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(icur==json[attr]) { clearInterval(obj.timer); if(fn) { fn(); } } else { if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(icur+iSpeed)+')'; obj.style.opacity=(icur+iSpeed)/100; } else { obj.style[attr]=icur+iSpeed+'px'; } } } },30) } function getStyle(obj,attr){ if(obj.currentStyle) { return obj.currentStyle[attr] } else { return getComputedStyle(obj,false)[attr]; } }
上面是js文件
下面调用
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>setStyle</title> <style> #div1{height:100px;width:100px;background:pink;color:red; position:absolute;top:40px;left:100px;;font-size:14px; border-radius:40px; } </style> <script src="miaov2.js"></script> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ //setStyle(this,{width:'300px',height:'300px',background:'blue'}); //alert(2); startMove(oDiv, {width:'300px'}); } } </script> </head> <body> <div id="div1" ></div><!--只有吧style的属性放在这个位置才可以取到--> </body> </html>
为什么没效果??????????
startMove(oDiv, {width:'300'});