做的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

浏览 924回答 1

1回答

stone310

startMove()函数里面这句：var curr=parseInt(getStyle(obj.width))；2个问题，1、参数用逗号隔开，参数width要带引号，getStyle(obj,"width")；2、这句话放到setInterval内部，因为每次循环都要获取它，即获取最新的width；如果放到setInterval外，则为固定值了，就没有动画效果

0 0

随时随地看视频慕课网APP