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腳本編寫(xiě)
- js實(shí)現(xiàn)手機(jī)web圖片左右滑動(dòng)效果
相關(guān)文章
基于JavaScript實(shí)現(xiàn)移除(刪除)數(shù)組中指定元素
在Array對(duì)象中有給定的函數(shù)可以刪除數(shù)組中指定的元素,雖然非常好用,但是總感覺(jué)看不到摸不著的比較別扭,下面就分享一個(gè)自定義的刪除數(shù)組指定索引值元素的函數(shù),希望給大家一個(gè)全新的思路2016-01-01
關(guān)閉瀏覽器輸入框自動(dòng)補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器
這篇文章主要介紹了關(guān)閉瀏覽器輸入框自動(dòng)補(bǔ)齊 兼容IE,FF,Chrome等主流瀏覽器,需要的朋友可以參考下。希望對(duì)大家有所幫助2014-02-02
JavaScript tab選項(xiàng)卡插件實(shí)例代碼
這篇文章主要介紹了JavaScript tab選項(xiàng)卡插件實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-02-02
js實(shí)現(xiàn)按鈕控制帶有停頓效果的圖片滾動(dòng)
這篇文章主要介紹了js實(shí)現(xiàn)按鈕控制帶有停頓效果的圖片滾動(dòng),,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻
這篇文章主要為大家詳細(xì)介紹了小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻,停止上一個(gè)視頻播放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11
微信小程序?qū)崿F(xiàn)發(fā)送驗(yàn)證碼按鈕效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)發(fā)送驗(yàn)證碼按鈕效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
js獲取客戶端外網(wǎng)ip的簡(jiǎn)單實(shí)例
這篇文章主要介紹了js獲取客戶端外網(wǎng)ip的簡(jiǎn)單實(shí)例,有需要的朋友可以參考一下2013-11-11

