欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript運(yùn)動框架 解決防抖動問題、懸浮對聯(lián)(二)

 更新時間:2022年05月08日 10:47:47   作者:GY_U_YG  
這篇文章主要為大家詳細(xì)介紹了JavaScript運(yùn)動框架的第二部分,解決防抖動問題、懸浮對聯(lián)問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實(shí)例是對JavaScript運(yùn)動框架(一)的應(yīng)用

scrollTop:有時候網(wǎng)頁很長,其高度大于顯示器高度,會產(chǎn)生滾動,那么在高度方向上,“滾走”的部分就是scrollTop

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

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

這里寫圖片描述

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

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

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

1:可以直接計算好位置,硬賦值;
2:緩沖運(yùn)動到目標(biāo)位置,效果更柔和。

一般不用第一種硬來,因為視覺效果很差,很生硬。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>運(yùn)動框架(二)</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  #div1 {
   width: 100px;
   height: 200px;
   background: orange;
   position: absolute;
   right: 0;
  }
 </style>
</head>
<body style="height: 30000000px;">
 <div id="div1"></div>
 <script type="text/javascript">
  var oDiv = document.getElementById('div1');
  var timer = null;
  window.onscroll = function() {
   //每次滾動網(wǎng)頁,都要重新計算目標(biāo)值,當(dāng)前值就是offsetTop
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   var target = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;
   //下面是硬賦值,計算好位置后,直接將值付給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é)果卻有問題,對聯(lián)不停地抖動,一上一下的抖動,也就是offsetTop不停的來回變化,如下兩個圖所示:

這里寫圖片描述

這里寫圖片描述

觀察上面兩個圖,看title,計算出來的目標(biāo)值是小數(shù):267.5px,也就是對聯(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ī)也不走小數(shù)個px,所以始終到不了267.5,就這么僵持著:跨一步,過了,退一步,狠了!來回抖動!
怎么解決,很簡單,不允許目標(biāo)值是個小數(shù):取整!

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

改為:

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • wap手機(jī)端解決返回上一頁的js實(shí)例

    wap手機(jī)端解決返回上一頁的js實(shí)例

    下面小編就為大家?guī)硪黄獁ap手機(jī)端解決返回上一頁的js實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-12-12
  • JS中數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm)實(shí)例詳解

    JS中數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm)實(shí)例詳解

    排序也稱排序算法 (Sort Algorithm),排序是將 一組數(shù)據(jù) , 依指定的順序 進(jìn)行 排列的過程 。這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm),需要的朋友可以參考下
    2019-06-06
  • 詳解JavaScript中的變量作用域和閉包

    詳解JavaScript中的變量作用域和閉包

    JavaScript作為一門解釋執(zhí)行的腳本語言,其變量作用域與傳統(tǒng)編譯型語言有著明顯的區(qū)別,本文將詳細(xì)介紹JavaScript中變量的作用域規(guī)則,以及利用閉包實(shí)現(xiàn)的常見作用域應(yīng)用場景,幫助讀者進(jìn)一步掌握J(rèn)avaScript編程,感興趣的朋友跟隨小編一起看看吧
    2024-01-01
  • JavaScript中的await/async的作用和用法

    JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前為止 JS 最佳的異步解決方案了。這篇文章主要介紹了JavaScript中的await/async的作用和用法的相關(guān)資料
    2016-10-10
  • Javascript簡單改變表單元素背景的方法

    Javascript簡單改變表單元素背景的方法

    這篇文章主要介紹了Javascript簡單改變表單元素背景的方法,涉及javascript操作頁面元素樣式的基本技巧,非常簡單實(shí)用,需要的朋友可以參考下
    2015-07-07
  • 按鈕JS復(fù)制文本框和表格的代碼

    按鈕JS復(fù)制文本框和表格的代碼

    有時候我們需要復(fù)制一個框的內(nèi)容或者整個表格,一般的操作很可能造成一些不方便,一是操作步驟較為復(fù)制,一是復(fù)制表格的時候容易復(fù)制不完整或者格式出錯。
    2011-04-04
  • HTML中使背景圖片自適應(yīng)瀏覽器大小實(shí)例詳解

    HTML中使背景圖片自適應(yīng)瀏覽器大小實(shí)例詳解

    這篇文章主要介紹了HTML中使背景圖片自適應(yīng)瀏覽器大小實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2017-04-04
  • uniapp基礎(chǔ)篇之上傳圖片的實(shí)戰(zhàn)步驟

    uniapp基礎(chǔ)篇之上傳圖片的實(shí)戰(zhàn)步驟

    應(yīng)用uni-app開發(fā)跨平臺App項目時,上傳圖片、文檔等資源功能需求十分常見,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)篇之上傳圖片的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • js常用代碼段收集

    js常用代碼段收集

    以下是平時收集的幾個常用代碼段,大多數(shù)是從網(wǎng)上搜集而來。也均為未找到是誰誰原創(chuàng),是否允許轉(zhuǎn)載等要求, 所以如果看到的朋友發(fā)現(xiàn)其中有些代碼是自己寫的,還請原諒在下轉(zhuǎn)帖出來。
    2011-10-10
  • js 性能優(yōu)化之算法和流程控制

    js 性能優(yōu)化之算法和流程控制

    循環(huán)處理是最常見的編程模式之一,也是提升性能必須關(guān)注的要點(diǎn)之一。本文將對此進(jìn)行介紹。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02

最新評論