移动端开发 判断手势方向

前端开发的主流框架有哪些|前端 移动端开发 pc模拟安卓浏览器|前端开发工程搭建

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ />
    <meta name=”format-detection” content=”telephone=no” />
    <title>手势判断</title>
    <style type=”text/css”>
        div {
            margin: 20px 0;
            font-size: 18px;
        }
        #container {
            width: 100%;
            height: 420px;
            background-color: #1AC78C;
        }
    </style>
</head>
<body>
    <div>
        <h3>触摸开始</h3>
        <p>触摸方向为:
            <span id=”direction”></span>
        </p>
    </div>
    <div id=”container”></div>
    <script type=”text/javascript”>
        var container = document.getElementById(“container”);
        var direction = document.getElementById(“direction”);
        var start_x;
        var start_y;
        var end_x;
        var end_y;
        container.addEventListener(“touchstart”, function (event) {
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                start_x = touch.pageX;
                start_y = touch.pageY;
            };
        });
        container.addEventListener(“touchmove”, function (event) {
            event.preventDefault();
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                move_x = touch.pageX;
                move_y = touch.pageY;
            };
        });
        container.addEventListener(“touchend”, function (event) {
            if (event.changedTouches.length == 1) {
                var touch = event.changedTouches[0];
                end_x = touch.pageX;
                end_y = touch.pageY;
            };
            var directionMsg = “”;
            var numRange = 20;
            if (start_x – end_x > numRange) {
                directionMsg += “左”;
            } else if (start_x – end_x < -numRange) {
                directionMsg += “右”;
            }
            if (start_y – end_y > numRange) {
                directionMsg += “上”;
            } else if (start_y – end_y < -numRange) {
                directionMsg += “下”;
            }
            direction.innerHTML = directionMsg;
        });
    </script>
</body>
</html>

.net 前端开发框架|前端开发入门教程百度云|前端与移动开发总结

» 本文来自:前端开发者 » 《移动端开发 判断手势方向》
» 本文链接地址:https://www.rokub.com/5195.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!