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í)有所幫助,也希望大家多多支持腳本之家。
- JavaScript函數(shù)防抖動debounce
- 通過實(shí)例講解JS如何防抖動
- JavaScript中防抖和節(jié)流的區(qū)別及適用場景
- JavaScript中防抖和節(jié)流的實(shí)戰(zhàn)應(yīng)用記錄
- JavaScript深入理解節(jié)流與防抖
- JavaScript防抖與節(jié)流的實(shí)現(xiàn)與注意事項
- JavaScript的防抖和節(jié)流一起來了解下
- JavaScript中函數(shù)的防抖與節(jié)流詳解
- javascript的防抖和節(jié)流你了解嗎
- 淺談JavaScript節(jié)流與防抖
- 關(guān)于JavaScript防抖與節(jié)流的區(qū)別與實(shí)現(xiàn)
- JavaScript防抖與節(jié)流詳解
- JavaScript 防抖和節(jié)流詳解
- JavaScript防抖動與節(jié)流處理
相關(guān)文章
JS中數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm)實(shí)例詳解
排序也稱排序算法 (Sort Algorithm),排序是將 一組數(shù)據(jù) , 依指定的順序 進(jìn)行 排列的過程 。這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm),需要的朋友可以參考下2019-06-06HTML中使背景圖片自適應(yīng)瀏覽器大小實(shí)例詳解
這篇文章主要介紹了HTML中使背景圖片自適應(yīng)瀏覽器大小實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04uniapp基礎(chǔ)篇之上傳圖片的實(shí)戰(zhàn)步驟
應(yīng)用uni-app開發(fā)跨平臺App項目時,上傳圖片、文檔等資源功能需求十分常見,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)篇之上傳圖片的相關(guān)資料,需要的朋友可以參考下2022-12-12