摘要:老規矩上,過過癮先縱向圖片滾動不過這個需要你在手機中查看啦再上源碼縱向滾動圖片很簡單,左側有個縱向的圖片數量以及當前圖片索引的展示,然后整個是一個縱向可觸摸滑動的列表,可以自定義滑動回調函數。
老規矩~ 上DEMO,過過癮先:縱向圖片滾動(不過這個demo需要你在手機中查看啦~)
再上源碼:縱向滾動圖片
DEMO很簡單,左側有個縱向的圖片數量以及當前圖片索引的展示,然后整個是一個縱向可觸摸滑動的列表,可以自定義滑動回調函數。
一. 先說原理首先圖片肯定是縱向排列的了
就像下邊這張圖一樣
灰色方塊就是一堆縱向排列的圖片
紅色方框中的是顯示區域,溢出隱藏
然后在動態改變方框內部的div的top值來切換顯示在方框中的不同圖片~
二. 碼代碼首先初始化容器高度,以及添加縱向的控制條
LONG_DISTANCE = nelsonVS.minHeight / 2; for(var i = 0 ; i < nelsonVS.lis.length ; i++){ nelsonVS.lis[i].style.height = nelsonVS.minHeight + "px"; } nelsonVS.ul.style.height = nelsonVS.num * nelsonVS.minHeight + "px"; var prograssBarDom = document.createElement("ul"); prograssBarDom.className = "prograssBar"; var fragment = document.createDocumentFragment(); for(var i = 0,linode = "" ; i < nelsonVS.num ; i ++){ linode = document.createElement("li"); linode.className = "prograssBarItem" + (i==0?" active":""); fragment.appendChild(linode); } prograssBarDom.appendChild(fragment); nelsonVS.dom.appendChild(prograssBarDom); nelsonVS.prograssBar = prograssBarDom.children; prograssBarDom = null;fragment = null; this.slide(); return this; }
然后,綁定滾動的事件
綁定touchstart記錄手指開始觸摸的位置
綁定touchmove實時更新手指觸摸點位于屏幕的位置,并使圖片容器隨著手指滾動
綁定touchend更新手指離開時候的位置,并根據位置來判斷是是將圖片歸位不進行滾動,還是滾動到下一張/上一張圖片(觸發臨界值可自行設定)
var STARTY,ENDY,EVENT_TYPE,START_POS,that = this,TIMESTAMP,TIMESTAMP_END; nelsonVS.dom.addEventListener("touchstart",function(e){ e.preventDefault(); TIMESTAMP = (new Date()).valueOf(); START_POS = nelsonVS.ul.offsetTop; STARTY = e.touches[0].clientY; if(that.moveInterval){ clearInterval(that.moveInterval); } }) nelsonVS.dom.addEventListener("touchmove",function(e){ e.preventDefault(); ENDY = e.targetTouches[0].clientY; nelsonVS.ul.style.top = START_POS + ENDY - STARTY + "px"; }) nelsonVS.dom.addEventListener("touchend",function(e){ e.preventDefault(); TIMESTAMP_END = (new Date()).valueOf(); var DIS = ENDY - STARTY; if(DIS > DISTANCE){ EVENT_TYPE = "DOWN"; }else if(DIS < -DISTANCE){ EVENT_TYPE = "UP"; } if(Math.abs(DIS) > DISTANCE){ if(TIMESTAMP_END - TIMESTAMP < SENSIBILITY){ that.checkAction(EVENT_TYPE); }else{ if(Math.abs(DIS) > LONG_DISTANCE){ that.checkAction(EVENT_TYPE); }else{ that.action(EVENT_TYPE); } } }else{ that.action(); } })
檢測滑動方向以及臨界值判斷
if((et == "UP" && (nelsonVS.index - 1) <= -nelsonVS.num) || (et == "DOWN" && (nelsonVS.index + 1) > 0)){ this.action(); return; } switch(et){ case "UP": nelsonVS.isSliding = true; nelsonVS.index--; this.action(et); break; case "DOWN": nelsonVS.index++; nelsonVS.isSliding = true; this.action(et); break; default: this.action(); } }
進行滾動處理
var AIM_POS = nelsonVS.minHeight * nelsonVS.index; var DIS = AIM_POS - nelsonVS.ul.offsetTop; var speed = (DIS) / 3; var that = this; that.moveInterval = setInterval(function(){ nelsonVS.ul.style.top = nelsonVS.ul.offsetTop + speed + "px"; if(Math.abs(AIM_POS - nelsonVS.ul.offsetTop) < speed || Math.abs(speed) <= 0.5){ nelsonVS.ul.style.top = AIM_POS + "px"; speed = (DIS) / 3; if(et){ var para = {}; para.index = -nelsonVS.index; para.item = nelsonVS.lis[para.index]; if(that.onSlideCallBack){ that.onSlideCallBack(para); if(that.onSlideUpCallBack||that.onSlideDownCallBack){ console.error("在設置滾動回調的時候不可同時設置單向滾動回調") } }else{ if(that.onSlideUpCallBack && et == "UP"){ that.onSlideUpCallBack(para); } if(that.onSlideDownCallBack && et == "DOWN"){ that.onSlideDownCallBack(para); } } } that.changePrograssBar(); clearInterval(that.moveInterval); nelsonVS.isSliding = false; }else{ speed = (AIM_POS - nelsonVS.ul.offsetTop) / 5; } },10)
更新控制條的當前索引值位置
for(var i = 0 ; i < nelsonVS.prograssBar.length ; i++){ if(nelsonVS.prograssBar[i].classList.contains("active")){ nelsonVS.prograssBar[i].classList.remove("active"); break; } } nelsonVS.prograssBar[-nelsonVS.index].classList.add("active");
其他就是一些回調函數啦~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111577.html
摘要:老規矩上,過過癮先縱向圖片滾動不過這個需要你在手機中查看啦再上源碼縱向滾動圖片很簡單,左側有個縱向的圖片數量以及當前圖片索引的展示,然后整個是一個縱向可觸摸滑動的列表,可以自定義滑動回調函數。 老規矩~ 上DEMO,過過癮先:縱向圖片滾動(不過這個demo需要你在手機中查看啦~) 再上源碼:縱向滾動圖片 DEMO很簡單,左側有個縱向的圖片數量以及當前圖片索引的展示,然后整個是一個縱向可...
摘要:老規矩上,過過癮先縱向圖片滾動不過這個需要你在手機中查看啦再上源碼縱向滾動圖片很簡單,左側有個縱向的圖片數量以及當前圖片索引的展示,然后整個是一個縱向可觸摸滑動的列表,可以自定義滑動回調函數。 老規矩~ 上DEMO,過過癮先:縱向圖片滾動(不過這個demo需要你在手機中查看啦~) 再上源碼:縱向滾動圖片 DEMO很簡單,左側有個縱向的圖片數量以及當前圖片索引的展示,然后整個是一個縱向可...
摘要:移動端觸屏滑動的效果其實就是圖片輪播,在的頁面上很好實現,綁定和等事件來完成。處理事件能跟蹤到屏幕滑動的每根手指。禁止滾動是阻止默認行為,事件的默認行為就是滾動。可惜在此玩了一個小時也沒有看見一列火車經過,只好繼續趕往東烏旗。 移動端觸屏滑動的效果其實就是圖片輪播,在PC的頁面上很好實現,綁定click和mouseover等事件來完成。但是在移動設備上,要實現這種輪播的效果,就需要用到...
摘要:移動端輪播圖插件,在使用圖形界面插件中的組件無法實現觸摸滑動后,轉而使用插件安裝我這里安裝的是下面的這個版本使用全局導入樣式的話,我這里有用到分頁器,就在全局中引入了樣式組件引入在中使用常見的小圓點 移動端輪播圖插件,在使用iview圖形界面插件中的carousel組件無法實現觸摸滑動后,轉而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...
閱讀 2078·2021-10-08 10:21
閱讀 2471·2021-09-29 09:34
閱讀 3494·2021-09-22 15:51
閱讀 4926·2021-09-22 15:46
閱讀 2314·2021-08-09 13:42
閱讀 3434·2019-08-30 15:52
閱讀 2723·2019-08-29 17:13
閱讀 1554·2019-08-29 11:30