欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(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)”這篇文章吧。

在金口河等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),網(wǎng)絡(luò)營(yíng)銷推廣,外貿(mào)營(yíng)銷網(wǎng)站建設(shè),金口河網(wǎng)站建設(shè)費(fèi)用合理。

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)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：JavaScript運(yùn)動(dòng)框架怎么解決防抖動(dòng)問題、懸浮對(duì)聯(lián)
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article30/gcscpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、企業(yè)建站、做網(wǎng)站、虛擬主機(jī)、微信小程序、品牌網(wǎng)站制作

廣告

聲明：本網(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)

成都做網(wǎng)站