利用純js + transition動畫實現(xiàn)移動端web輪播圖詳解
前言
在上一篇文章中,我們使用 tween算法實現(xiàn)了 ease-out移動效果, 其實更簡潔的方法是使用 css3的 transition動畫,下面話不多說了,來一起看看詳細的介紹吧。
核心點:
在 我們通過代碼來移動一段距離的時候, 使用 transion動畫;在手指移動的時候,不使用transition動畫.
使用 transition實現(xiàn)的動畫效果的輪播圖js代碼不足100行
~function () { var lastPX = 0; // 上一次觸摸的位置x坐標, 需要計算出手指每次移動的一點點距離 var movex = 0; // 記錄手指move的x方向值 var imgWrap = document.getElementById('imgWrap'); var startX = 0; // 開始觸摸時手指所在x坐標 var endX = 0; // 觸摸結(jié)束時手指所在的x坐標位置 var imgSize = imgWrap.children.length - 2; // 圖片個數(shù) var t1 = 0; // 記錄開始觸摸的時刻 var t2 = 0; // 記錄結(jié)束觸摸的時刻 var width = window.innerWidth; // 當前窗口寬度 var nodeList = document.querySelectorAll('#imgWrap img'); // 所有輪播圖節(jié)點數(shù)組 NodeList // 給圖片設(shè)置合適的left值, 注意 querySelectorAll返回 NodeList, 具有 forEach方法 nodeList.forEach(function (node, index) { node.style.left = (index - 1) * width + 'px'; }); /** * 移動圖片到當前的 tIndex索引所在位置 * @param {number} tIndex 要顯示的圖片的索引 * */ function toIndex(tIndex) { var dis = -(tIndex * width); // 動畫移動 imgWrap.style.transform = 'translate3d(' + dis + 'px, 0, 0)'; imgWrap.style.transition = 'transform .2s ease-out'; movex = dis; // 索引到最后一張圖片, 迅速切換索引到同一張圖的初始位置 setTimeout(function () { if (tIndex === imgSize) { imgWrap.style.transform = 'translate3d(0, 0, 0)'; imgWrap.style.transition = 'none'; movex = 0; } if (tIndex === -1) { imgWrap.style.transform = 'translate3d(' + width * (1 - imgSize) + 'px, 0, 0)'; imgWrap.style.transition = 'none'; movex = -width * (imgSize - 1); } }, 200); } /** * 處理各種觸摸事件 ,包括 touchstart, touchend, touchmove, touchcancel * @param {Event} evt 回調(diào)函數(shù)中系統(tǒng)傳回的 js 事件對象 * */ function touch(evt) { var touch = evt.targetTouches[0]; var tar = evt.target; var index = parseInt(tar.getAttribute('data-index')); if (evt.type === 'touchmove') { var di = parseInt(touch.pageX - lastPX); endX = touch.pageX; movex += di; imgWrap.style.webkitTransform = 'translate3d(' + movex + 'px, 0, 0)'; imgWrap.style.transition = 'none'; // 移動時避免動畫延遲 lastPX = touch.pageX; } if (evt.type === 'touchend') { var minus = endX - startX; t2 = new Date().getTime() - t1; if (Math.abs(minus) > 0) { // 有拖動操作 if (Math.abs(minus) < width * 0.4 && t2 > 500) { // 拖動距離不夠,返回! toIndex(index); } else { // 超過一半,看方向 console.log(minus); if (Math.abs(minus) < 20) { console.log('距離很短' + minus); toIndex(index); return; } if (minus < 0) { // endX < startX,向左滑動,是下一張 toIndex(index + 1) } else { // endX > startX ,向右滑動, 是上一張 toIndex(index - 1) } } } else { //沒有拖動操作 } } if (evt.type === 'touchstart') { lastPX = touch.pageX; startX = lastPX; endX = startX; t1 = new Date().getTime(); } return false; } imgWrap.addEventListener('touchstart', touch, false); imgWrap.addEventListener('touchmove', touch, false); imgWrap.addEventListener('touchend', touch, false); imgWrap.addEventListener('touchcancel', touch, false); }();
注意事項:
當切換到邊界值的圖時,應(yīng)該等到切換動畫效果之后再換到相同圖內(nèi)容的位置
所以: 我們使用setTimeout延遲執(zhí)行 無限循環(huán)播放替換圖位置的操作
至于 css 和 html嘛, 還是原來的配方, 還是原來的味道~參見這篇文章:http://www.dbjr.com.cn/article/123303.htm
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
B/S開發(fā)中常用javaScript技術(shù)與代碼
B/S開發(fā)中常用javaScript技術(shù)與代碼...2007-03-03JS+CSS實現(xiàn)帶關(guān)閉按鈕DIV彈出窗口的方法
這篇文章主要介紹了JS+CSS實現(xiàn)帶關(guān)閉按鈕DIV彈出窗口的方法,實例分析了div彈出層窗口的實現(xiàn)技巧,非常具有實用價值,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02用Javascript檢查Adobe PDF插件是否安裝的實現(xiàn)代碼
用Javascript檢查Adobe PDF插件是否安裝的代碼2009-12-12微信小程序使用this.setData()遇到的問題及解決方案詳解
this.setData估計是小程序中最經(jīng)常用到的一個方法,但是要注意其實他是有限制的,忽略這些限制的話,會導致數(shù)據(jù)無法更新,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用this.setData()遇到的問題及解決方案,需要的朋友可以參考下2022-08-08