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

执行下面代码后不知道为什么打开游览器只能正常运行一次第二次就开始乱飘了!

<!DOCTYPE html>

<html>

<meta charset="utf-8"/>

<head>

<title>速度</title>

<link rel="stylesheet" type="text/css" href="定时器.css">

<script src="速度.js"></script>

</head>

<body>

<div class="div1" id="div1">

<span class="div0">速度</span>

</div>

</body>

</html>

//css

.div1{

width:80px;

height: 80px;

position: relative;

background-color: red;

left: -80px;

}

.div0{

position: absolute;

left: 80px;

background-color: blue;

width: 20px;

height: 40px;

top: 20px;

font-size: 10px;


}

//js

window.onload=function(){

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

tanchu.onmouseover=function(){

startMove(10,0);

}

tanchu.onmouseout=function(){

startMove(-10,-70);

}

}

var timer=null;

function startMove(speed,itarget){

clearInterval(timer);

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

timer=setInterval(function(){

if(tanchu.offsetLeft==itarget){

clearInterval(timer);

}

else

{

tanchu.style.left=tanchu.offsetLeft+speed+'px';

}},3);

}


正在回答

4 回答

<!DOCTYPE html>

<html>

<meta charset="utf-8"/>

<head>

<title>速度</title>

<style type="text/css">

body{

margin: 0;

padding: 0;

}

.div1{

width:80px;

height: 80px;

position: relative;

background-color: red;

left: -80px;

}

.div0{

position: absolute;

left: 80px;

background-color: blue;

width: 20px;

height: 40px;

top: 20px;

font-size: 12px;


}

</style>


</head>

<body>

<div class="div1" id="div1">

<span class="div0">速度</span>

</div>

</body>

<script type="text/javascript">

var timer=null;

window.onload=function(){

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

// alert(tanchu.offsetLeft);//弹出的是72.。。所以和你想的有天差地别

tanchu.onmouseover=function(){

startMove(10,0);

}

tanchu.onmouseout=function(){

startMove(-10,-70);

}

}


function startMove(speed,itarget){

clearInterval(timer);

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

timer=setInterval(function(){

if(tanchu.offsetLeft==itarget){

clearInterval(timer);

}

else

{

tanchu.style.left=tanchu.offsetLeft+speed+'px';

}},10);

}


</script>

</html>


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

BAYBAZC 提问者

非常感谢!
2015-11-04 回复 有任何疑惑可以回复我~
#2

谭谭谭 回复 BAYBAZC 提问者

下面那个仁兄说的也对,我试过了的
2015-11-04 回复 有任何疑惑可以回复我~

我想问问,为什么在一个计时器开始之前,就清除啊,clearInterval(timer);就是这句

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

相对定位使用错误。将.div1样式中的display:relative 改为display:absolute就可以了。

详解:相对定位元素会相对于它在正常流中的默认位置偏移。

所以你第一次,执行的时候是正常。第二次的时候它参照物发生了变化。不再是文档刚加载完毕时的位置。

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

没有清楚默认的。。。所以就会出现72的来。所以应在css中加margin:0;padding:0;这个一抖一抖的,或者你这种情况的,一般都是数字不对导致的。。你看到那个alert()没有,如果没有加的话会是72,就是浏览器帮你添加的。。。。。我上面的代码,亲测没有问题!!

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

举报

0/150
提交
取消

执行下面代码后不知道为什么打开游览器只能正常运行一次第二次就开始乱飘了!

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