JavaScript實(shí)現(xiàn)移動(dòng)端輪播效果
這個(gè)輪播代碼不是我自己所寫,是偶然游覽一個(gè)簡(jiǎn)友的主頁(yè)看到的,今天剛看了事件,決定來逐行分析一下這個(gè)代碼。首先,移動(dòng)端與電腦端不同的是移動(dòng)端只能通過觸摸和手勢(shì)來發(fā)生行為,所以我們要用到j(luò)s中的與觸摸操作有關(guān)的新事件。其實(shí)我們輪播的原理和以前相同,都是通過改變?cè)氐奈恢脕砜刂茍D片的出現(xiàn),但讓我們不是很上手的,是那些用于跟蹤觸摸的屬性。
下面,我簡(jiǎn)單介紹一下與觸摸相關(guān)的知識(shí)
觸摸事件
- touchstart:當(dāng)手指觸摸屏幕時(shí)觸發(fā),一只手指放在屏幕上也會(huì)觸發(fā)
- touchmove:當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)觸發(fā)。在這個(gè)事件發(fā)生期間可以用preventDefault()可以阻止?jié)L動(dòng)。
- touchend:手指從屏幕移開時(shí)觸發(fā)。
- touchcancel:當(dāng)系統(tǒng)停止跟蹤觸發(fā)時(shí)觸發(fā)。
上面這幾個(gè)事件都會(huì)冒泡,也都可以取消。
屬性
- touches:表示當(dāng)前跟蹤的觸摸操作的Touch對(duì)象的數(shù)組
- targetTouches:特定于事件目標(biāo)的Touch對(duì)象的數(shù)組。(簡(jiǎn)單點(diǎn)可以理解為手指觸摸屏幕的位置)
- changeTouches表示自上次觸摸以來發(fā)生了什么改變的touch對(duì)象的數(shù)組。(手指離開的位置)
每個(gè)touch對(duì)象包括下列屬性
- clientX:觸摸目標(biāo)在視口中的x坐標(biāo)
- clientY:觸摸目標(biāo)在視口中的y坐標(biāo)
- identifier:標(biāo)識(shí)觸摸的唯一ID
- pageX:觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)
- pageY:觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)
- screenX:觸摸目標(biāo)在頁(yè)面中的x坐標(biāo)
- screenY:觸摸目標(biāo)在頁(yè)面中的y坐標(biāo)
- target:觸摸的dom節(jié)點(diǎn)目標(biāo)
代碼如下
<!DOCTYPE html> <html> <head> <title>移動(dòng)端輪播</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 980px; overflow: hidden; position: relative; margin: 0 auto; } #box ul { width: 4900px; height: 100px; position: relative; transform: translateX(-980px); } #box ul li{ width: 980px; height: 100px; float: left; list-style-type: none; text-align: center; color: #fff; line-height: 100px; font-size: 30px; } </style> <script type="text/javascript"> window.onload = function() { var box = document.getElementById('box'); var oUl = document.getElementsByTagName('ul')[0]; var aLi = oUl.children;//這樣就可以把所有l(wèi)i標(biāo)簽獲取到了 var iNow = 1; var x = -iNow*aLi[0].offsetWidth;//li標(biāo)簽的位置 var bReady = true; oUl.addEventListener('touchstart',function(ev){ //當(dāng)手指觸摸屏幕的時(shí)候觸發(fā)事件,讓li的位置隨手指滑動(dòng)而改變 if(bReady == false){return;} bReady = false; var downX = ev.targetTouches[0].pageX; //記錄觸摸位置 var disX = downX - x;//下一個(gè)li要移動(dòng)到的位置 function fnMove(ev) { x = downX-disX; oUl.style.transform = 'translate3d('+x+'px,0,0)'; } function fnEnd(ev){ var upX = ev.changedTouches[0].pageX;//離開的位置 if(Math.abs(upX - downX)>50){ //左邊移動(dòng) if(upX - downX<0){ iNow++; if(iNow==aLi.length){iNow=aLi.length-1;} }else{ //右邊移動(dòng) iNow--; if(iNow==-1){iNow=0;} } } x = -iNow*aLi[0].offsetWidth; oUl.style.transform = 'translate3d('+x+'px,0,0)'; oUl.style.transition = '200ms all ease'; function tEnd(){ if(iNow==4){ iNow=1; } if(iNow==0){iNow=3;} oUl.style.transition = 'none' x = -iNow*aLi[0].offsetWidth; oUl.style.transform = 'translate3d('+x+'px,0,0)'; bReady = true; } oUl.addEventListener('transitionend',tEnd,false); //釋放內(nèi)存 document.removeEventListener('touchend',fnEnd,false); document.removeEventListener('touchmove',fnMove,false); } document.addEventListener('touchmove',fnMove,false); document.addEventListener('touchend',fnEnd,false); //阻止默認(rèn)事件 ev.preventDefault(); },false); } </script> </head> <body> <div id="box"> <ul> <li style="background:green">3</li> <li style="background:orange">1</li> <li style="background:yellow">2</li> <li style="background:green">3</li> <li style="background:orange">1</li> </ul> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js 右鍵菜單,支持不同對(duì)象不同菜單(兼容IE、Firefox)
版本雖然很老也不符合標(biāo)準(zhǔn)了,不過代碼是值得參考的,需要右鍵菜單的朋友可以參考下。2010-01-01JS實(shí)現(xiàn)文件動(dòng)態(tài)順序載入的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文件動(dòng)態(tài)順序載入的方法,實(shí)例分析了基于Mootools框架實(shí)現(xiàn)動(dòng)態(tài)載入的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁(yè)效果的方法詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)畫是如何實(shí)現(xiàn)下拉刷新和上拉分頁(yè)效果的,文中示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06javascript表單驗(yàn)證以及正則表達(dá)式舉例詳解
正則表達(dá)式描述了一種字符串匹配的模式,可以用來檢查一個(gè)串是否含有某種子串、將匹配的子串替換或者從某個(gè)串中取出符合某個(gè)條件的子串等,常用于表單驗(yàn)證等,下面這篇文章主要給大家介紹了關(guān)于javascript表單驗(yàn)證以及正則表達(dá)式的相關(guān)資料,需要的朋友可以參考下2023-05-05JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(四)仿優(yōu)酷視頻應(yīng)用
這篇文章主要介紹了JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(四)仿優(yōu)酷視頻應(yīng)用的相關(guān)資料,需要的朋友可以參考下2015-12-12JS/CSS實(shí)現(xiàn)字符串單詞首字母大寫功能
這篇文章主要介紹了JS/CSS實(shí)現(xiàn)字符串單詞首字母大寫功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09JS實(shí)現(xiàn)的哈夫曼編碼示例【原始版與修改版】
這篇文章主要介紹了JS實(shí)現(xiàn)的哈夫曼編碼,結(jié)合實(shí)例形式分析了基于JavaScript定義、使用哈夫曼樹進(jìn)行編碼、解碼等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)卡片左右滑動(dòng)效果的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05js中訪問html中iframe的文檔對(duì)象的代碼[IE6,IE7,IE8,FF]
W3C的標(biāo)準(zhǔn)告訴我們,可以通過Dom對(duì)象的contentDocument屬性來返回文檔對(duì)象。2011-01-01