您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“JS如何實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS如何實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果”這篇文章吧。
可能這個(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í)器的條件上寫(xiě)==,會(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>
以上是“JS如何實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過(guò)彈出框+緩沖效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。