可能這個標題起得不夠恰當，簡單來說就是：當鼠標移到最左側時，移出一個框。
首先，我們用兩個div來簡單布局以下頁面：
<div id="box"> <div id="share">分享到</div> </div>
這個分享框的彈出原理是：把內層div定位到外層div最右側緊貼，然後把外層div定位到屏幕左外測，left的值與寬度相等，剛好隱藏掉就可以。當鼠標經過時，再通過改變left的值使外層div顯示出來。
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var oShare=document.getElementById('share');
var timer=null; //定義一個空的定時器
function startmove(iTarget){
var speed=0; //定義步長
clearInterval(timer); //每次調用函數後，先執行關閉定時器的代碼，目的是防止多次操作導致計時器疊加出現變速的Bug
timer=setInterval(function(){
if(oBox.offsetLeft<iTarget){ //目標值從事件調用函數中傳入，當盒子左邊距小於目標值時，說明還沒移動到指定位置，讓步長=10，往右運動
speed=10;
}
else{ //否則就是超過了目標值，讓步長=-10，往左運動
speed=-10;
}
if(oBox.offsetLeft==iTarget){ //當盒子左邊距等於目標值時，就關閉計時器
clearInterval(timer);
}
else{
oBox.style.left=oBox.offsetLeft+speed+'px'; //盒子左邊的距離，即移動的距離，注意加上單位；這個else分支也解決了一個bug:當滿足條件停下來後，繼續點擊還會運動，所以加上else分支
}
},30)
}
//函數調用
oBox.onmouseover=function(){
startmove(0);
}
oBox.onmouseout=function(){
startmove(-200);
}
}
</script>
這裡要注意的幾個點：
1、分析清楚offsetLeft與目標值的關系，什麼時候步長為正，什麼時候步長為負；
2、offsetLeft獲取出來不帶單位，所以在設置left的值時要記得加上單位。
容易出現的幾個bug：
1、在設置步長時，當步長不能被整除，在關閉計時器的條件上寫==，會出現盒子運動不停的bug，改為>=或者修改步長來修復Bug；
2.3、在注釋裡說明。
緩沖效果
原理：根據計算出的步長進行運動，大於0向左運動，小於0向右運動。緩沖運動不僅視覺上更和諧，而且也更為方便。
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var timer=null;
function startmove(iTarget){
clearInterval(timer);
timer=setInterval(function(){
//求步長，為正向右移動，為負向左移動，10為自定義
var speed=(iTarget-oBox.offsetLeft)/10;
//對步長取整，大於0向上取整，小於0向下取整，原因就是正數越來越大，負數越來越小
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//設置left的值
oBox.style.left=oBox.offsetLeft+speed+'px';
},30)
}
oBox.onmouseenter=function(){
startmove(0);
}
oBox.onmouseleave=function(){
startmove(-200);
}
}
</script>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！