可能這個(gè)標(biāo)題起得不夠恰當(dāng)，簡(jiǎn)單來(lái)說(shuō)就是：當(dāng)鼠標(biāo)移到最左側(cè)時(shí)，移出一個(gè)框。

首先，我們用兩個(gè)div來(lái)簡(jiǎn)單布局以下頁(yè)面：

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

這個(gè)分享框的彈出原理是：把內(nèi)層div定位到外層div最右側(cè)緊貼，然后把外層div定位到屏幕左外測(cè)，left的值與寬度相等，剛好隱藏掉就可以。當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，再通過(guò)改變left的值使外層div顯示出來(lái)。

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

這里要注意的幾個(gè)點(diǎn)：

1、分析清楚offsetLeft與目標(biāo)值的關(guān)系，什么時(shí)候步長(zhǎng)為正，什么時(shí)候步長(zhǎng)為負(fù)；

2、offsetLeft獲取出來(lái)不帶單位，所以在設(shè)置left的值時(shí)要記得加上單位。

容易出現(xiàn)的幾個(gè)bug：

1、在設(shè)置步長(zhǎng)時(shí)，當(dāng)步長(zhǎng)不能被整除，在關(guān)閉計(jì)時(shí)器的條件上寫==，會(huì)出現(xiàn)盒子運(yùn)動(dòng)不停的bug，改為>=或者修改步長(zhǎng)來(lái)修復(fù)Bug；

2.3、在注釋里說(shuō)明。

緩沖效果

原理：根據(jù)計(jì)算出的步長(zhǎng)進(jìn)行運(yùn)動(dòng)，大于0向左運(yùn)動(dòng)，小于0向右運(yùn)動(dòng)。緩沖運(yùn)動(dòng)不僅視覺(jué)上更和諧，而且也更為方便。

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