                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

下面的代码为什么不能实现鼠标移入移出div1的width在200px到600px之间变化？

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>运动框架</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
    #div1{ width: 200px; height: 100px; background-color: #ff0000;}
</style>
<script type="text/javascript">
window.onload = function(){
oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
  startMove(600);
}
oDiv.onmouseout = function(){
  startMove(200);
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
  return obj.currentStyle[attr];
}else{
  return getComputedStyle(obj,false)[attr];
}
}
var timer = null;
function startMove(iTarget){
clearInterval(timer);
var oDiv = document.getElementById('div1');
var div_width = parseInt(getStyle(oDiv,'width'));
timer = setInterval(function(){
  var speed = 0;
  if(div_width > iTarget){
   speed = -10;
  }else if(div_width <iTarget){
   speed = 10;
  }
  if(div_width == iTarget){
   clearInterval(timer);
  }else{
   oDiv.style.width = div_width + speed + 'px';
  }
},30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

Metotaste

2016-02-22

源自：JS动画效果 3-1

关注问题我要回答

504

操作

收起

2 回答

Metotaste 提问者
2016-02-22

解决方案：

需要把下面两行代码移动到timer=setInterval()这个方法里的函数的函数体里。

var oDiv = document.getElementById('div1');

var div_width = parseInt(getStyle(oDiv,'width'));

最终有效的代码是这样的：

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>运动框架</title>
<style type="text/css">
 *{ margin: 0; padding: 0;}
    #div1{  width: 200px; height: 100px; background-color: #ff0000;}
</style>
<script type="text/javascript">
window.onload = function(){
 oDiv = document.getElementById('div1');
 oDiv.onmouseover = function(){
  startMove(600);
 }
 oDiv.onmouseout = function(){
  startMove(200);
 }
}
function getStyle(obj,attr){
 if(obj.currentStyle){
  return obj.currentStyle[attr];
 }else{
  return getComputedStyle(obj,false)[attr];
 }
}
var timer = null;
function startMove(iTarget){
 clearInterval(timer);
 timer = setInterval(function(){
  var speed = 0; 
  var oDiv = document.getElementById('div1');       //这行代码发生了位置上的移动
  var div_width = parseInt(getStyle(oDiv,'width')); //这行代码也发生了位置上的移动
  if(div_width > iTarget){
   speed = -10;
  }else if(div_width <iTarget){
   speed = 10;
  }
  if(div_width == iTarget){
   clearInterval(timer);
  }else{
   oDiv.style.width = div_width + speed + 'px';
  }
 },30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>