移动端怎么用JS判断是手势是向上滑动还是向下滑动

JavaScript019

移动端怎么用JS判断是手势是向上滑动还是向下滑动,第1张

参考这位博客的内容：

js判断手指滑动方向（移动端）

var startx, starty

//获得角度

function getAngle(angx, angy) {

return Math.atan2(angy, angx) * 180 / Math.PI

}

//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动

function getDirection(startx, starty, endx, endy) {

var angx = endx - startx

var angy = endy - starty

var result = 0

//如果滑动距离太短

if (Math.abs(angx) <2 &&Math.abs(angy) <2) {

return result

}

var angle = getAngle(angx, angy)

if (angle >= -135 &&angle <= -45) {

result = 1

} else if (angle >45 &&angle <135) {

result = 2

} else if ((angle >= 135 &&angle <= 180) || (angle >= -180 &&angle <-135)) {

result = 3

} else if (angle >= -45 &&angle <= 45) {

result = 4

}

return result

}

//手指接触屏幕

document.addEventListener("touchstart", function(e) {

startx = e.touches[0].pageX

starty = e.touches[0].pageY

}, false)

//手指离开屏幕

document.addEventListener("touchend", function(e) {

var endx, endy

endx = e.changedTouches[0].pageX

endy = e.changedTouches[0].pageY

var direction = getDirection(startx, starty, endx, endy)

switch (direction) {

case 0:

alert("未滑动！")

break

case 1:

alert("向上！")

break

case 2:

alert("向下！")

break

case 3:

alert("向左！")

break

case 4:

alert("向右！")

break

default:

}

}, false)

<script language="javascript" type="text/javascript">

//图片滚动展示 Start

var counts = 4

//大图//

img1 = new Image()

img1.src = 'images/1.jpg'

img2 = new Image()

img2.src = 'images/2.jpg'

img3 = new Image()

img3.src = 'images/3.jpg'

img4 = new Image()

img4.src = 'images/4.jpg'

var smallImg = new Array()

//小图

smallImg[0] = 'images/index_adb1.gif'

smallImg[1] = 'images/index_adb2.gif'

smallImg[2] = 'images/index_adb3.gif'

smallImg[3] = 'images/index_adb4.gif'

//链接地址

url1 = new Image()

url1.src = ' http://www.baidu.com'

url2 = new Image()

url2.src = ' http://www.qzxtg.com'

url3 = new Image()

url3.src = ' http://www.soso.com'

url4=new Image()

url4.src=' http://www.sina.com.cn'

//alt值

alt1 = new Image()

alt1.alt = ''

alt2 = new Image()

alt2.alt = ''

alt3 = new Image()

alt3.alt = ' '

alt4 = new Image()

alt4.alt=''

////欢迎来到标准之路.

var nn = 1

var key = 0

function change_img() {

if (key == 0) {

key = 1

} else if (document.all) {

document.getElementById("pic").filters[0].Apply()

document.getElementById("pic").filters[0].Play(duration = 2)

}

eval('document.getElementById("pic").src=img' + nn + '.src')

eval('document.getElementById("url").href=url' + nn + '.src')

eval('document.getElementById("pic").alt=alt' + nn + '.alt')

if (nn == 1) {

document.getElementById("url").target = "_blank"

document.getElementById("url").style.cursor = "pointer"

} else {

document.getElementById("url").target = "_blank"

document.getElementById("url").style.cursor = "pointer"

}

for ( var i = 1i <= countsi++) {

document.getElementById("xxjdjj" + i).className = 'axx'

}

document.getElementById("xxjdjj" + nn).className = 'bxx'

nn++

if (nn >counts) {

nn = 1

}

tt = setTimeout('change_img()', 7000)

}

function changeimg(n) {

nn = n

window.clearInterval(tt)

change_img()

}

function imageshow() {

document.write('<div class="picshow_main">')

document.write('<div><a id="url"><img id="pic" class="imgbig" /></a></div>')

document.write('<div class="picshow_change">')

for ( var i = 0i <countsi++) {

document.write('<a href="javascript:changeimg(' + (i + 1)

+ ')" id="xxjdjj' + (i + 1)

+ '" class="axx" target="_self"><img src="' + smallImg[i]

+ '"></a>')

}

document.write('</div></div>')

change_img()

}

//图片滚动展示 End

</script>

<script language="javascript" type="text/javascript">

imageshow()

</script>