JS如何實現(xiàn)側邊欄鼠標經(jīng)過彈出框+緩沖效果-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都做網(wǎng)站、網(wǎng)站建設、增城網(wǎng)絡推廣、小程序制作、增城網(wǎng)絡營銷、增城企業(yè)策劃、增城品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供增城建站搭建服務，24小時服務熱線：18980820575，官方網(wǎng)址：muchs.cn

可能這個標題起得不夠恰當，簡單來說就是：當鼠標移到最左側時，移出一個框。

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

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

這個分享框的彈出原理是：把內層div定位到外層div最右側緊貼，然后把外層div定位到屏幕左外測，left的值與寬度相等，剛好隱藏掉就可以。當鼠標經(jīng)過時，再通過改變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); //每次調用函數(shù)后，先執(zhí)行關閉定時器的代碼，目的是防止多次操作導致計時器疊加出現(xiàn)變速的Bug
 timer=setInterval(function(){
  if(oBox.offsetLeft<iTarget){ //目標值從事件調用函數(shù)中傳入，當盒子左邊距小于目標值時，說明還沒移動到指定位置，讓步長=10，往右運動
  speed=10;
  }
  else{ //否則就是超過了目標值，讓步長=-10，往左運動
  speed=-10;
  }
  if(oBox.offsetLeft==iTarget){ //當盒子左邊距等于目標值時，就關閉計時器
  clearInterval(timer);
  }
  else{
oBox.style.left=oBox.offsetLeft+speed+'px'; //盒子左邊的距離，即移動的距離，注意加上單位；這個else分支也解決了一個bug:當滿足條件停下來后，繼續(xù)點擊還會運動，所以加上else分支
  }
 },30)
 }
 //函數(shù)調用  
 oBox.onmouseover=function(){
 startmove(0);
 }
 oBox.onmouseout=function(){
 startmove(-200);
 }
}
</script>

這里要注意的幾個點：

1、分析清楚offsetLeft與目標值的關系，什么時候步長為正，什么時候步長為負；

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

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

1、在設置步長時，當步長不能被整除，在關閉計時器的條件上寫==，會出現(xiàn)盒子運動不停的bug，改為>=或者修改步長來修復Bug；

2.3、在注釋里說明。

緩沖效果

原理：根據(jù)計算出的步長進行運動，大于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向下取整，原因就是正數(shù)越來越大，負數(shù)越來越小
  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>

以上是“JS如何實現(xiàn)側邊欄鼠標經(jīng)過彈出框+緩沖效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站標題：JS如何實現(xiàn)側邊欄鼠標經(jīng)過彈出框+緩沖效果-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article14/deihge.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、商城網(wǎng)站、靜態(tài)網(wǎng)站、全網(wǎng)營銷推廣、服務器托管、網(wǎng)站導航

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

猜你還喜歡下面的內容