触屏手指滑动计算演示
生活随笔
收集整理的這篇文章主要介紹了
触屏手指滑动计算演示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>觸屏手指滑動計算演示</title>
</head>
<body style="font-size:32px;">
<div style="width:100%">
<h2>觸屏手指滑動方向計算演示</h2>
<div id="region" style="background-color:yellow;width:100%;height:50%"></div>
起始坐標<br/>
<input id="touchStart" style="font-size: 48px;"/><br/>
結果計算<br/>
<input id="touchMove" style="font-size: 48px;"/>
</div>
<script type="text/javascript">
/** * 功能：計算手指在指定標簽上的滑動的方向*/var tagId = "region";var pressX = 0, pressY = 0;var obj = document.getElementById(tagId);obj.addEventListener('touchmove', function(event) {// 如果這個元素的位置內只有一個手指的話if (event.targetTouches.length == 1) {var touch = event.targetTouches[0];var spanX = touch.pageX - pressX;var spanY = touch.pageY - pressY;var direct = "none";if (Math.abs(spanX) > Math.abs(spanY)) {//水平方向if (spanX > 0) {direct = "right";//向右//do right function} else {direct = "left";//向左//do left function}} else {//垂直方向if (spanY > 0) {direct = "down";//向下//do down function} else {direct = "up";//向上//do up function}}// 把元素放在手指所在的位置touchMove.value = direct + "(" + spanX + ';' + spanY + ")";}}, false);obj.addEventListener('touchstart', function(event) {// 如果這個元素的位置內只有一個手指的話if (event.targetTouches.length == 1) {var touch = event.targetTouches[0];// 把元素放在手指所在的位置pressX = touch.pageX;pressY = touch.pageY;touchStart.value = pressX + ';' + pressY;}}, false);/*obj.addEventListener('touchend', function(event) {// 如果這個元素的位置內只有一個手指的話if (event.targetTouches.length == 1) {var touch = event.targetTouches[0];// 把元素放在手指所在的位置touchEnd.value=touch.pageX + ';' + touch.pageY;}}, false);*/
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的触屏手指滑动计算演示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HikariCP数据库连接池，太快了！
- 下一篇： n维椭球体积公式_中考物理各种公式单位换