<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標(biāo)題文檔</title>
</head>
<style?type="text/css">
*{
margin:0;
padding:0;}
.move-left{
width:200px;
height:200px;
background-color:#F00;
?????position:relative;
left:-200px;
}
.move-right{
width:20px;
height:40px;
background-color:#00C;
????left:200px;
position:absolute;
margin-top:70px;}
</style>
<script>
window.onload=function(){
var?oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
starMove(0);}
oDiv.onmouseout=function(){
starMove(-200);}
}
var?timer=null;
function?starMove(iTarget){
clearInterval(timer);
var?oDiv=document.getElementById('div1');
?timer?=?setInterval(function(){
??var?speed?=?0;
if(oDiv.offsetLeft?>?iTarget){
speed?=?-30;}
???
else{
speed?=?30;
}
?if(oDiv.offsetLeft?==?iTarget){
?clearInterval(timer);}
?else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';?}
??},300)
}
</script>
<body>
<div?class="move-left"?id="div1">
<div?class="move-right">分享</div></div>
</body>
</html>
因為目標(biāo)值為0?速度為?30??寬度為200?所以到達(dá)0之前?offsetleft?值為-20?然后加30?就變成了?10??就會來回抖動，請問怎么解決？
2016-07-13
這完全是螺絲跟螺母不吻合造成的，要么你那速度改成200可以整除的數(shù)，要么就把目標(biāo)位置改成速度的倍數(shù)。