JS手機(jī)端touch事件計(jì)算滑動(dòng)距離的方法示例
本文實(shí)例講述了JS手機(jī)端touch事件計(jì)算滑動(dòng)距離的方法。分享給大家供大家參考,具體如下:
計(jì)算手勢(shì)在手機(jī)屏幕上滑動(dòng)時(shí),手勢(shì)滑動(dòng)的距離,代碼如下:
function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(event){ var touch = event.targetTouches[0]; //滑動(dòng)起點(diǎn)的坐標(biāo) startX = touch.pageX; startY = touch.pageY; // console.log("startX:"+startX+","+"startY:"+startY); }); body.bind("touchmove",function(event){ var touch = event.targetTouches[0]; //手勢(shì)滑動(dòng)時(shí),手勢(shì)坐標(biāo)不斷變化,取最后一點(diǎn)的坐標(biāo)為最終的終點(diǎn)坐標(biāo) endX = touch.pageX; endY = touch.pageY; // console.log("endX:"+endX+","+"endY:"+endY); }) body.bind("touchend",function(event){ var distanceX=endX-startX, distanceY=endY - startY; // console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY); //移動(dòng)端設(shè)備的屏幕寬度 var clientHeight; =document.documentElement.clientHeight; // console.log(clientHeight;*0.2); //判斷是否滑動(dòng)了,而不是屏幕上單擊了 if(startY!=Math.abs(distanceY)){ //在滑動(dòng)的距離超過(guò)屏幕高度的20%時(shí),做某種操作 if(Math.abs(distanceY)>clientHeight*0.2){ //向下滑實(shí)行函數(shù)someAction1,向上滑實(shí)行函數(shù)someAction2 distanceY <0 ? someAction1():someAction2(); } } startX = startY = endX =endY =0; }) }
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng))
- JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果
- js仿小米手機(jī)上下滑動(dòng)效果
- javascript Slip.js實(shí)現(xiàn)整屏滑動(dòng)的手機(jī)網(wǎng)頁(yè)
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- wap手機(jī)圖片滑動(dòng)切換特效無(wú)css3元素js腳本編寫
- js實(shí)現(xiàn)手機(jī)web圖片左右滑動(dòng)效果
相關(guān)文章
JavaScript手寫一個(gè)前端存儲(chǔ)工具庫(kù)
在項(xiàng)目開發(fā)的過(guò)程中,為了減少提高性能,減少請(qǐng)求,開發(fā)者往往需要將一些不易改變的數(shù)據(jù)放入本地緩存中。本文就來(lái)用JavaScript手寫一個(gè)前端存儲(chǔ)工具庫(kù),希望對(duì)大家有所幫助2023-02-02微信網(wǎng)頁(yè)登錄邏輯與實(shí)現(xiàn)方法
這篇文章主要介紹了微信網(wǎng)頁(yè)登錄邏輯與實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04修改 bootstrap table 默認(rèn)detailRow樣式的實(shí)例代碼
這篇文章主要介紹了修改 bootstrap table 默認(rèn)detailRow樣式的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-07-07ES6數(shù)組復(fù)制和填充方法copyWithin()、fill()的具體使用
本文主要介紹了ES6數(shù)組復(fù)制和填充方法copyWithin()、fill()的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JavaScript實(shí)現(xiàn)將Word文檔解析成瀏覽器認(rèn)識(shí)的HTML
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)將Word文檔解析成瀏覽器認(rèn)識(shí)的HTML,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-02-02JS表單驗(yàn)證插件之?dāng)?shù)據(jù)與邏輯分離操作實(shí)例分析【策略模式】
這篇文章主要介紹了JS表單驗(yàn)證插件之?dāng)?shù)據(jù)與邏輯分離操作,結(jié)合實(shí)例形式分析了JavaScript基于策略模式實(shí)現(xiàn)數(shù)據(jù)與邏輯分離的表單驗(yàn)證插件相關(guān)原理、操作技巧及注意事項(xiàng),需要的朋友可以參考下2020-05-05詳解如何讓InstantClick兼容MathJax、百度統(tǒng)計(jì)等
本篇文章主要介紹了如何讓InstantClick兼容MathJax、百度統(tǒng)計(jì)等,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09