<div id="box">
 <div id="share">分享到</div>
</div>

<script type="text/javascript">
 window.onload=function(){
 var oBox=document.getElementById('box');
 var oShare=document.getElementById('share');
 var timer=null; //定義一個(gè)空的定時(shí)器
 function startmove(iTarget){
 var speed=0; //定義步長(zhǎng)
 clearInterval(timer); //每次調(diào)用函數(shù)后，先執(zhí)行關(guān)閉定時(shí)器的代碼，目的是防止多次操作導(dǎo)致計(jì)時(shí)器疊加出現(xiàn)變速的Bug
 timer=setInterval(function(){
  if(oBox.offsetLeft<iTarget){ //目標(biāo)值從事件調(diào)用函數(shù)中傳入，當(dāng)盒子左邊距小于目標(biāo)值時(shí)，說(shuō)明還沒(méi)移動(dòng)到指定位置，讓步長(zhǎng)=10，往右運(yùn)動(dòng)
  speed=10;
  }
  else{ //否則就是超過(guò)了目標(biāo)值，讓步長(zhǎng)=-10，往左運(yùn)動(dòng)
  speed=-10;
  }
  if(oBox.offsetLeft==iTarget){ //當(dāng)盒子左邊距等于目標(biāo)值時(shí)，就關(guān)閉計(jì)時(shí)器
  clearInterval(timer);
  }
  else{
oBox.style.left=oBox.offsetLeft+speed+'px'; //盒子左邊的距離，即移動(dòng)的距離，注意加上單位；這個(gè)else分支也解決了一個(gè)bug:當(dāng)滿足條件停下來(lái)后，繼續(xù)點(diǎn)擊還會(huì)運(yùn)動(dòng)，所以加上else分支
  }
 },30)
 }
 //函數(shù)調(diào)用  
 oBox.onmouseover=function(){
 startmove(0);
 }
 oBox.onmouseout=function(){
 startmove(-200);
 }
}
</script>

<script type="text/javascript">
 window.onload=function(){
 var oBox=document.getElementById('box');
 var timer=null;
 function startmove(iTarget){
  clearInterval(timer);
  timer=setInterval(function(){
  //求步長(zhǎng)，為正向右移動(dòng)，為負(fù)向左移動(dòng)，10為自定義
  var speed=(iTarget-oBox.offsetLeft)/10; 
  //對(duì)步長(zhǎng)取整，大于0向上取整，小于0向下取整，原因就是正數(shù)越來(lái)越大，負(fù)數(shù)越來(lái)越小
  speed=speed>0?Math.ceil(speed):Math.floor(speed); 
  //設(shè)置left的值
  oBox.style.left=oBox.offsetLeft+speed+'px';
  },30)
 }
 oBox.onmouseenter=function(){
  startmove(0);
 }
 oBox.onmouseleave=function(){
  startmove(-200);
 }
 }
</script>