为了账号安全,请及时绑定邮箱和手机立即绑定

各位大神,看一下我的为什么不能停止。

<!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 回答

最开始没有把CSS样式初始化,加一段代码    *{margin:0;padding:0;}即可以完美的解决你这个问题

0 回复 有任何疑惑可以回复我~
#1

不倒翁_BOzI

为什么不加 *{margin:0;padding:0;}就停不下来呀?
2016-05-14 回复 有任何疑惑可以回复我~
#2

金伟sir 提问者

非常感谢!
2016-05-17 回复 有任何疑惑可以回复我~

因为不初始化的话,div初始的left值就不是-200、速度+的值就不会完整的等于0.永远不满足循环停止的条件,所以就陷入了死循环

1 回复 有任何疑惑可以回复我~
#1

sulin

太棒啦,你也完美的解决了我的问题,但我还有一个问题想问问你,你能帮忙解决一下吗?我开始的时候清除所有格式写成了div{margin:0; padding: 0;},所以怎么也停不下来,我就自己乱改了一下,将他们的定位改成了#div1{position: t:absolute;} #share{position:relative;},居然达到了效果,但是这样组合使用absolute和relative在原理上好像是错误的!
2016-05-24 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

各位大神,看一下我的为什么不能停止。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信