做的js运动换了获取非行间样式后就没有效果了,是什么情况啊

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>speed</title>
 <style type="text/css">
 div{width: 100px;height: 50px;background: red;margin: 10px}
 </style>
 <script type="text/javascript">
 window.onload=function()
 {
  var aDiv=document.getElementsByTagName('div')
    
  for(var i=0;i<aDiv.length;i++)
  {           aDiv[i].timer=null
   aDiv[i].onmouseover=function()
   {

    startMove(this,400)
   }
   aDiv[i].onmouseout=function()
   {
    startMove(this,100)
   }
  }
 
 }
 function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];   
        }else{
            return getComputedStyle(obj,false)[name];
        }   
}
 
 function startMove(obj,iTarget)
 {
  clearInterval(obj.timer)
  var curr=parseInt(getStyle(obj.width))
  obj.timer=setInterval(function()
  {
                                var speed=(iTarget-curr)/6;
                                speed=speed>0?Math.ceil(speed):Math.floor(speed)
                                if(curr==iTarget)
                                {
                                 clearInterval(obj.timer)
                                }
                                else
                                {
                                 obj.style.width=curr+speed+'px'

                                }
  },30)
 }
 </script>
</head>
<body>
 <div></div>
 <div></div>
 <div></div>
</body>
</html>

慕粉4084340
浏览 922回答 1
1回答

stone310

startMove()函数里面这句:var curr=parseInt(getStyle(obj.width));2个问题,1、参数用逗号隔开,参数width要带引号,getStyle(obj,"width");2、这句话放到setInterval内部,因为每次循环都要获取它,即获取最新的width;如果放到setInterval外,则为固定值了,就没有动画效果
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript