可能這個標題起得不夠恰當,簡單來說就是:當鼠標移到最左側時,移出一個框。
首先,我們用兩個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>
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持!