为什么在滑出时会来回的晃动
来源：2-1 JS速度动画
源ying
2015-08-25 10:51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
#div1{width:100px;
height:300px;
background:#98fb98;
left:-100px;
position:relative;
}
span{width:30px;height:100px;left:100px;background: #0000ff;position:absolute;}
</style>
<script type="text/javascript">
window.onload=function(){
var timer
var odiv=document.getElementById('div1');
odiv.onmouseover=function(){
startmove(10,0);
}
odiv.onmouseout=function(){
startmove(-10,-100);
}
}
function startmove(speen,itarget){
var odiv=document.getElementById('div1');
clearInterval(timer);
var timer=setInterval(function(){
if(odiv.offsetLeft==itarget){
clearInterval(timer);
}
else{
odiv.style.left=odiv.offsetLeft+speen+'px';
}
}, 100)
}
</script>
</head>
<body>
<div id="div1"><span>分享</span></div>
</body>
</html>不断的加10减10 一直晃动停不下来
写回答
关注
2回答
-
- 小姑娘技术好
- 2015-09-03 16:54:37
布局有问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" /> <style type="text/css"> #div1{ width: 150px;height: 400px;background: pink;position: absolute;left:-150px;top:100px;} #div1 li{width: 148px;height: 98px;border: 1px solid gray;text-align: center;list-style:none;line-height: 98px} #div1 span{ width: 20px;height: 60px;background: gray;position: absolute;top: 170px;right: -20px; } </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ Show(0); }; oDiv.onmouseout=function(){ Show(-150); }; } var timer=null; function Show(loaction){ var oDiv=document.getElementById('div1'); if (oDiv.offsetLeft>loaction){ speed=-10;} else{speed=10;} clearInterval(timer); timer=setInterval(function(){ if(oDiv.offsetLeft==loaction){ clearInterval(timer); } else{oDiv.style.left=oDiv.offsetLeft+speed+'px';} },30) } </script> </head> <body> <div id="div1"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <span>分享到</span> </div> </body> </html> -
- 纪奕滨
- 2015-08-30 22:19:50
试了一下你这个代码，发现了两个问题：
1：滑出来时视觉上在来回的晃动。
出现这个问题主要是因为定时器的时间你调成100毫秒的原因，由于时间较慢，导致在视觉上有总卡壳的感觉，就是说每次调动函数的间隔时间有点大。
2：当鼠标拖离是盒子在网页的边界上不断来回的晃动，像素大概10px。
解决方法：
window.onload=function(){
var timer（这个timer的定义没有必要，因为没办法用到下面的函数中）}
在function startmove(speen,itarget){}这个函数的上面定义一个全局变量，也就是var timer =null;
把
var timer=setInterval(function(){
if(odiv.offsetLeft==itarget){
clearInterval(timer);
}
else{
odiv.style.left=odiv.offsetLeft+speen+'px';
}
}, 100)
这个函数中的var timer=setInterval(function(){前面的var去掉，如果加上var就相当于重新定义了一个timer。至于为什么应该这样我也想不通，因为这个bug有时出现有时不出现。
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113908 学习 · 1502 问题
相似问题