這篇文章主要為大家展示了“JS如何實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過彈出框+緩沖效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS如何實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過彈出框+緩沖效果”這篇文章吧。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),吐魯番網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:吐魯番等地區(qū)。吐魯番做網(wǎng)站價(jià)格咨詢:18982081108

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

首先，我們用兩個(gè)div來簡單布局以下頁面：

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

這個(gè)分享框的彈出原理是：把內(nèi)層div定位到外層div最右側(cè)緊貼，然后把外層div定位到屏幕左外測，left的值與寬度相等，剛好隱藏掉就可以。當(dāng)鼠標(biāo)經(jīng)過時(shí)，再通過改變left的值使外層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; //定義步長
 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í)，說明還沒移動(dòng)到指定位置，讓步長=10，往右運(yùn)動(dòng)
  speed=10;
  }
  else{ //否則就是超過了目標(biāo)值，讓步長=-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)滿足條件停下來后，繼續(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í)候步長為正，什么時(shí)候步長為負(fù)；

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

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

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

2.3、在注釋里說明。

緩沖效果

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

<script type="text/javascript">
 window.onload=function(){
 var oBox=document.getElementById('box');
 var timer=null;
 function startmove(iTarget){
  clearInterval(timer);
  timer=setInterval(function(){
  //求步長，為正向右移動(dòng)，為負(fù)向左移動(dòng)，10為自定義
  var speed=(iTarget-oBox.offsetLeft)/10; 
  //對(duì)步長取整，大于0向上取整，小于0向下取整，原因就是正數(shù)越來越大，負(fù)數(shù)越來越小
  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)過彈出框+緩沖效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：JS如何實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過彈出框+緩沖效果
轉(zhuǎn)載源于：http://www.chinadenli.net/article34/jigepe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站導(dǎo)航、營銷型網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、做網(wǎng)站、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)