跑起来了，但是为什么没有停下来啊？求救啊，求救。
man豪
2016-03-16 14:29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 80px;
background-color: #c22;
position: relative;
left: -200px;
top: 0px;
}
#div1 span{
width: 20px;
height: 20px;
background-color: blue;
position: absolute;
left: 200px;
top: 30px;
}
</style>
<script>
window.onload = function(){
var odiv= document.getElementById('div1');
odiv.onmouseover=function(){
startmove();
}
}
var timer = null;
function startmove(){
clearInterval(timer)
var odiv = document.getElementById('div1');
timer = setInterval(function(){
if(odiv.offsetLeft == 100){
clearInterval(timer);
}
else{
odiv.style.left = odiv.offsetLeft+10+'px';
}
},30)
}
</script>
</head>
<body>
<div id="div1"><span></span></div>
</body>
</html>
4回答
-
- 呆4
- 2016-03-16 15:28:40
你没有清除样式，也就是加上这段*{margin:0;padding:0;}。导致你div的left并不等于200这个整数，导致你后面odiv.style.left = odiv.offsetLeft+10+'px';时，至直接跳过了odiv.offsetLeft == 100这个数，从而使得你的程序停不下来，你可以先把
if(odiv.offsetLeft == 100){
clearInterval(timer);
}
修改为
if(odiv.offsetLeft <= 100){
clearInterval(timer);
}
自己看下最后的odiv.offsetLeft等于多少。
修改以后的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#div1{
width: 200px;
height: 80px;
background-color: #c22;
position: relative;
left: -200px;
top: 0px;
}
#div1 span{
width: 20px;
height: 20px;
background-color: blue;
position: absolute;
left: 200px;
top: 30px;
}
</style>
<script>
window.onload = function(){
var odiv= document.getElementById('div1');
odiv.onmouseover=function(){
startmove();
}
}
var timer = null;
function startmove(){
clearInterval(timer)
var odiv = document.getElementById('div1');
timer = setInterval(function(){
if(odiv.offsetLeft == 0){
clearInterval(timer);
}
else{
odiv.style.left = odiv.offsetLeft+10+'px';
alert(odiv.offsetLeft);
}
},30)
}
</script>
</head>
<body>
<div id="div1"><span></span></div>
</body>
</html>
-
- 蚂蚁不想搬家
- 2016-04-21 14:17:34
啊！看看问答，自己的问题就解决了！真棒！调了俩小时都不知道为啥错了。原来是初始化！
-
- 从此浪迹天涯了无牵挂
- 2016-04-17 01:14:28
回找了半天，视频翻过去看的，一直没找到原因，倒是注意到自己没初始化了，但没觉得会有影响。没想到问题出在那儿了，还是得细心啊
-
- 清辉玉璧寒
- 2016-03-31 15:45:13
楼上正解
JS动画效果
113925 学习 · 1443 问题
相似问题