各位大神，看一下我的为什么不能停止。
金伟sir
2016-05-11 15:06
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:red;
position:relative;
left:-200px;
top:0px;
}
#share{
width:20px;
height:50px;
background-color:blue;
position:absolute;
left:200px;
top:50px;}
</style>
<script >
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove();
}
}
var timer=null;
function startMove(){
var oDiv=document.getElementById("div1");
timer=setInterval(function(){
if(oDiv.offsetLeft == 0)
{
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
}
,30);
}
</script>
</head>
<body>
<div id="div1"><span id="share">点击</span></div>
</body>
</html>
2回答
-
- 浪子丶
- 2016-05-11 16:55:03
最开始没有把CSS样式初始化，加一段代码 *{margin：0；padding：0；}即可以完美的解决你这个问题
-
- 浪子丶
- 2016-05-16 20:52:38
因为不初始化的话，div初始的left值就不是-200、速度+的值就不会完整的等于0.永远不满足循环停止的条件，所以就陷入了死循环
JS动画效果
113923 学习 · 1443 问题
相似问题
回答 1
回答 1