执行下面代码后不知道为什么打开游览器只能正常运行一次第二次就开始乱飘了！
BAYBAZC
2015-11-03 21:59
<!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回答
-
- 谭谭谭
- 2015-11-04 09:36:20
<!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>
-
- 整个人都娇惯了
- 2015-12-23 01:11:49
我想问问，为什么在一个计时器开始之前，就清除啊，clearInterval(timer);就是这句
-
- pardon110
- 2015-11-04 09:48:43
相对定位使用错误。将.div1样式中的display:relative 改为display:absolute就可以了。
详解：相对定位元素会相对于它在正常流中的默认位置偏移。
所以你第一次，执行的时候是正常。第二次的时候它参照物发生了变化。不再是文档刚加载完毕时的位置。
-
- 谭谭谭
- 2015-11-04 09:38:21
没有清楚默认的。。。所以就会出现72的来。所以应在css中加margin:0;padding:0;这个一抖一抖的，或者你这种情况的，一般都是数字不对导致的。。你看到那个alert()没有，如果没有加的话会是72，就是浏览器帮你添加的。。。。。我上面的代码，亲测没有问题！！
JS动画效果
113925 学习 · 1443 问题
相似问题