為什么在滑出時會來回的晃動
<!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 一直晃動停不下來
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>2015-08-30
試了一下你這個代碼，發現了兩個問題：
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有時出現有時不出現。