摘要:此時需要判斷當(dāng)前位置是否大于或者小于,若超過這個極限值需要重設(shè)目標(biāo)位移及幀位移,使其在極限值內(nèi)。判斷第二次滑動是否與第一次不同方向,若不同向需重置上次幀位移為。以免上次幀位移太大影響移動方向。
本文由云+社區(qū)發(fā)表
最近的一個活動頁面需要做一個可以左右滑動的抽簽效果,故通過用css的transform屬性和js結(jié)合來模擬可以無限滾動的效果。
先上效果:
demo地址:https://kiroroyoyo.github.io/...
實(shí)現(xiàn)過程 1. 結(jié)構(gòu)與樣式結(jié)構(gòu):卡片分前后兩排,每列插入10個div結(jié)點(diǎn),以便做左右位移效果。
樣式:設(shè)置每一列都恰好好在中間位置(或中間位置附近),如下所示。
a. 前排(cardFrond)相對于視口的初始位置(left:-255.5%;):
b. 后排(backFrond)相對于視口的初始位置(left:-228.3%;):
2. 無限滾動原理由于這里的停止位置是固定的,前排永遠(yuǎn)是當(dāng)前卡片相對于視口居中,后排永遠(yuǎn)是兩個卡片相對于視口居中,且每個卡片是一樣的,所以當(dāng)卡片列表向前或向右移動到一個目標(biāo)位置時,都將列表重置為初始位置繼續(xù)滾動。如下圖以前排卡片為例:
所以當(dāng)滾動停止后會統(tǒng)一將列表樣式設(shè)置為transform: translateX(0)。而對于用戶這一操作是無感知的,認(rèn)為已經(jīng)滑動到了新的位置。
3.滑動過程實(shí)現(xiàn)a. 目標(biāo)位移與幀位移
為了做出滑動后到停留位置的緩動效果,所以當(dāng)用戶左右滑動屏幕時,會記錄滑動距離,計算出卡片該到的目標(biāo)位移位置,目標(biāo)位移位置是有規(guī)則的,因為這里有10張卡片均分寬度,位置必須是(100%/10)的整數(shù)倍,例如-40%、-30%、……40%,這樣才能保證目標(biāo)位置與初始位置相重合。
目標(biāo)位移代碼片段
onDocumentMouseUp : function(e){ //如果是點(diǎn)擊事件 不設(shè)置移動 if (!this.fingerTouch) return; this.moveDirect = this.lon > 0 ? 1 : -1; this.transNum = this.lon/10 + this.moveDirect; this.lon = Math.round(this.transNum) * 10; this.fingerTouch = false; }
記錄了目標(biāo)位移后,每一幀會以一定的幀位移不斷靠近目標(biāo)位移,使其在手指離開屏幕時仍有慢慢滑動到目標(biāo)位置的緩動效果。此時需要判斷當(dāng)前位置是否大于40%或者小于-40%,若超過這個極限值需要重設(shè)目標(biāo)位移及幀位移,使其在極限值內(nèi)。
animate: function(){ this.prePos += (this.lon - this.prePos) * 0.1; if (this.prePos > 40) { this.lon = this.lon - 40; this.prePos = this.prePos - 40; }else if (this.prePos < -40) { this.lon = this.lon + 40; this.prePos = this.prePos + 40; } //判斷是否到達(dá)了目標(biāo)位置 if (Math.abs(this.prePos - this.lon) < 0.01 && Math.abs(this.lon) > 0.01 && (!this.fingerTouch)) { this.ani_move = false; this.prePos = 0; this.frondCard.style = "transform: translateX("+ this.prePos +"%)"; this.backCard.style = "transform: translateX("+ this.prePos +"%)"; }else{ this.frondCard.style = "transform: translateX("+ this.prePos +"%)"; this.backCard.style = "transform: translateX("+ (-this.prePos) +"%)"; requestAnimationFrame(this.animate.bind(this)); } },
b. 連續(xù)滑動判斷
當(dāng)在上次滑動動畫還未播放結(jié)束時用戶又進(jìn)行了第二次滑動時,需要執(zhí)行一下操作:
? 1). 判斷滑動時機(jī)處于上次滑動手指已離開屏幕但動畫還未結(jié)束,此時需要記錄兩個flag,一個是ani_move,記錄動畫是否仍在進(jìn)行,fingerTouch記錄手指是否停留屏幕。
? 2). 判斷第二次滑動是否與第一次不同方向,若不同向需重置上次幀位移為0。以免上次幀位移太大影響移動方向。
1)與2)代碼片段:
if( this.ani_move && this.fingerTouch == false) { // 判斷是否不同向 if (((e.clientX - prex) > 0 ? 1: -1) == -this.moveDirect ) { this.lon = 0; this.prePos = 0; this.moveDirect = -this.moveDirect; } }
3). 取消第二次滑動時的動畫播放和位移重置
// 若是上次動畫未結(jié)束不需要再次啟動動畫和重置目標(biāo)位移 if( this.ani_move && this.fingerTouch == false) { } else { this.lon = 0; cardAnimate.animate(); }寫在最后
目前這個滑動效果只能針對卡片相同,停留位置固定的情況,因為需要做到位置重合。使用css transform來做無限滾動的效果,可以避免改變dom結(jié)點(diǎn)帶來的頁面重新布局。
下圖是chrome cpu6倍減速調(diào)試效果,沒有觸發(fā)layout,F(xiàn)PS基本維持在60左右。
代碼地址:
https://github.com/kiroroyoyo...
此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/53454.html
摘要:此時需要判斷當(dāng)前位置是否大于或者小于,若超過這個極限值需要重設(shè)目標(biāo)位移及幀位移,使其在極限值內(nèi)。判斷第二次滑動是否與第一次不同方向,若不同向需重置上次幀位移為。以免上次幀位移太大影響移動方向。 本文由云+社區(qū)發(fā)表 最近的一個活動頁面需要做一個可以左右滑動的抽簽效果,故通過用css的transform屬性和js結(jié)合來模擬可以無限滾動的效果。 先上效果: showImg(https://s...
摘要:此時需要判斷當(dāng)前位置是否大于或者小于,若超過這個極限值需要重設(shè)目標(biāo)位移及幀位移,使其在極限值內(nèi)。判斷第二次滑動是否與第一次不同方向,若不同向需重置上次幀位移為。以免上次幀位移太大影響移動方向。 本文由云+社區(qū)發(fā)表 最近的一個活動頁面需要做一個可以左右滑動的抽簽效果,故通過用css的transform屬性和js結(jié)合來模擬可以無限滾動的效果。 先上效果: demo地址:https://kir...
摘要:因此,如果可能,最好利用好毫秒響應(yīng)預(yù)先計算開銷大的工作,這樣網(wǎng)站就更有可能實(shí)現(xiàn)的性能??臻e主線程工作分成不大于毫秒的塊。點(diǎn)擊按鈕見圖示,會在頁面運(yùn)行時捕獲性能指標(biāo)。 前言 經(jīng)常能在博客或者論壇上看到很多有關(guān)前端性能優(yōu)化的文章,但是卻很少看到如何分析一個網(wǎng)頁的性能的文章。到底什么樣的指標(biāo)(或者說是標(biāo)準(zhǔn))代表這個網(wǎng)頁性能好或者不好,通過什么方式來得到這些指標(biāo)呢?因此,本文來講述下如何分析一...
原文鏈接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。 注意,雖然是掃碼體驗,但是AlloyTouch.FullPag...
閱讀 2976·2023-04-26 02:25
閱讀 2249·2023-04-25 18:05
閱讀 647·2021-09-30 09:57
閱讀 2943·2021-09-27 14:10
閱讀 1652·2019-08-30 15:44
閱讀 1003·2019-08-29 15:28
閱讀 2524·2019-08-29 14:10
閱讀 2263·2019-08-29 13:30