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

源自：3-1 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 11:46

个回答

Metotaste: 2016-02-22 17:09:49

解决方案：

需要把下面两行代码移动到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>

Wo_o明

2016-02-22 15:47:56

在你最后的一个else里面有错误。你可以改成这样：
div_width+=speed;oDiv.style.width=div_width+'px';
否则你的div_width永远只是200+10=210px

0