                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

为什么在滑出时会来回的晃动

<!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 一直晃动停不下来

源ying

2015-08-25

源自：JS动画效果 2-1

关注问题我要回答

1155

操作

收起

2 回答

小姑娘技术好
2015-09-03

布局有问题

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