JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)”這篇文章吧。

目前累計(jì)服務(wù)客戶超過千家，積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗(yàn)。以網(wǎng)站設(shè)計(jì)水平和技術(shù)實(shí)力，樹立企業(yè)形象，為客戶提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。創(chuàng)新互聯(lián)始終以務(wù)實(shí)、誠(chéng)信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過對(duì)領(lǐng)先技術(shù)的掌握、對(duì)創(chuàng)意設(shè)計(jì)的研究、對(duì)客戶形象的視覺傳遞、對(duì)應(yīng)用系統(tǒng)的結(jié)合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

scrollTop：有時(shí)候網(wǎng)頁很長(zhǎng)，其高度大于顯示器高度，會(huì)產(chǎn)生滾動(dòng)，那么在高度方向上，“滾走”的部分就是scrollTop

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

offsetTop：此屬性可以獲取元素的上外緣距離最近采用定位父元素內(nèi)壁的距離，如果父元素中沒有采用定位的，則是獲取上外邊緣距離文檔內(nèi)壁的距離。所謂的定位就是position屬性值為relative、absolute或者fixed。

JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)

圖中，黑色框是網(wǎng)頁文檔，其高度：document.documentElement.scrollHeight;

綠色框是當(dāng)前可見的客戶區(qū)部分（不包括工具條，狀態(tài)欄之類的），紅色方框是要固定在客戶區(qū)正中央的對(duì)聯(lián)，假如網(wǎng)頁高度很高，用戶不停的滾動(dòng)，要求對(duì)聯(lián)以緩沖運(yùn)動(dòng)的形式保持在客戶區(qū)右側(cè)中央，（postion:fixed;可以做到，而且非常穩(wěn)定的做到，滾動(dòng)網(wǎng)頁，div紋絲不動(dòng)的焊在那里）。

但我們想讓它運(yùn)動(dòng)性的最后落腳在目標(biāo)位置：

1：可以直接計(jì)算好位置，硬賦值；
2：緩沖運(yùn)動(dòng)到目標(biāo)位置，效果更柔和。一般不用第一種硬來，因?yàn)橐曈X效果很差，很生硬。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>運(yùn)動(dòng)框架（二）</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  #div1 {
   width: 100px;
   height: 200px;
   background: orange;
   position: absolute;
   right: 0;
  }
 </style>
</head>
<body >
 <div id="div1"></div>
 <script type="text/javascript">
  var oDiv = document.getElementById('div1');
  var timer = null;
  window.onscroll = function() {
   //每次滾動(dòng)網(wǎng)頁，都要重新計(jì)算目標(biāo)值，當(dāng)前值就是offsetTop
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   var target = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;
   //下面是硬賦值,計(jì)算好位置后，直接將值付給style.top,太生硬
   //oDiv.style.top = target;

   startMove(target);
  };
  function startMove(iTarget) {
   clearInterval(timer);
   timer = setInterval(function() {
    var speed = (iTarget - oDiv.offsetTop) / 10;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (iTarget == oDiv.offsetTop) {
     clearInterval(timer);
    } else {
     oDiv.style.top = oDiv.offsetTop + speed + 'px';
     document.title = iTarget + ',' + oDiv.offsetTop;
    }
   }, 30);
  }
 </script>
</body>
</html>

運(yùn)行結(jié)果卻有問題，對(duì)聯(lián)不停地抖動(dòng)，一上一下的抖動(dòng)，也就是offsetTop不停的來回變化，如下兩個(gè)圖所示：

JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)

JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)

觀察上面兩個(gè)圖，看title，計(jì)算出來的目標(biāo)值是小數(shù)：267.5px，也就是對(duì)聯(lián)最后應(yīng)該停留的style.top值，speed = (267.5 - 267)/10 –> 1 , 跨1px到 268，
speed = (267.5 - 268)/10 –> -1，退1px，到267，始終到不了267.5的目標(biāo)值，上一篇文章中讓速度只能取整，并且計(jì)算機(jī)也不走小數(shù)個(gè)px，所以始終到不了267.5，就這么僵持著：跨一步，過了，退一步，狠了！來回抖動(dòng)！
怎么解決，很簡(jiǎn)單，不允許目標(biāo)值是個(gè)小數(shù)：取整！

var target = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;

改為：

var target = parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop);

以上是“JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

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

分享題目：JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://muchs.cn/article10/djiido.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、軟件開發(fā)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃、面包屑導(dǎo)航、虛擬主機(jī)

廣告

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

成都app開發(fā)公司