JavaScript的监听触摸事件

其他 2018-06-22 11:14:46 阅读次数: 3

监听

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Wsscat滑动事件Demo</title>
    </head>

    <body>
        <article>上下左右滑动</article>
    </body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        article {
            background-color: #000000;
            width: 100%;
            height: 100px;
            text-align: center;
            line-height: 100px;
            color: #FFFFFF;
        }
    </style>
    <script>
        (function() {
            var touch = {};
            function direction(startX, changeX, startY, changeY) {
                return Math.abs(startX - changeX) >=
                    Math.abs(startY - changeY) ? (startX - changeX > 0 ? 'Left' : 'Right') : (startY - changeY > 0 ? 'Up' : 'Down')
            }
            document.getElementsByTagName('body')[0].addEventListener('touchstart', function(e) {
                touch.startY = e.targetTouches[0].pageY;
                touch.startX = e.targetTouches[0].pageX;
                //console.log("点击时的X坐标" + nStartX + "和Y坐标" + nStartY);
            });
            document.getElementsByTagName('body')[0].addEventListener('touchmove', function(e) {
                touch.whenChangY = e.changedTouches[0].pageY;
                touch.whenChangX = e.changedTouches[0].pageX;
                //console.log("滑动时的X坐标" + nWhenChangX + "和Y坐标" + nWhenChangY);
            })
            document.getElementsByTagName('body')[0].addEventListener('touchend', function(e) {
                touch.changY = e.changedTouches[0].pageY;
                touch.changX = e.changedTouches[0].pageX;
                //console.log("滑动后的X坐标" + nChangX + "和Y坐标" + nChangY);
                var swDirection = direction(touch.startX, touch.changX, touch.startY, touch.changY);
                console.log(swDirection);
            })
        })()
    </script>

</html>

触摸

<!--touchstart
在触摸开始时触发事件
touchend
在触摸结束时触发事件
touchmove
在触摸期间时触发事件-->

<!DOCTYPE html>
<html lang="zh-cn" class="no-js">

    <head>
        <meta http-equiv="Content-Type">
        <meta content="text/html; charset=utf-8">
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="format-detection" content="email=no">
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
    </head>

    <body>
        <div class="page page-1-1 page-current">
            <div class="wrap">
                1
            </div>
        </div>
        <div class="page page-2-1 hide">
            <div class="wrap">
                2
            </div>
        </div>
        <div class="page page-2-2 hide">
            <div class="wrap">
                3
            </div>
        </div>
        <div class="page page-3-1 hide">
            <div class="wrap">
                4
            </div>
        </div>
    </body>
    <script>
        (function() {
            var now = {
                    row: 1,
                    col: 1
                },
                last = {
                    row: 0,
                    col: 0
                };
            const towards = {
                up: 1,
                right: 2,
                down: 3,
                left: 4
            };
            var isAnimating = false;
            var touch = {};
            function direction(startX, changeX, startY, changeY) {
                return Math.abs(startX - changeX) >=
                    Math.abs(startY - changeY) ? (startX - changeX > 0 ? 'Left' : 'Right') : (startY - changeY > 0 ? 'Up' : 'Down')
            }
            document.getElementsByTagName('body')[0].addEventListener('touchstart', function(e) {
                touch.startY = e.targetTouches[0].pageY;
                touch.startX = e.targetTouches[0].pageX;
                //console.log("点击时的X坐标" + nStartX + "和Y坐标" + nStartY);
            });
            document.getElementsByTagName('body')[0].addEventListener('touchmove', function(e) {
                touch.whenChangY = e.changedTouches[0].pageY;
                touch.whenChangX = e.changedTouches[0].pageX;
                //console.log("滑动时的X坐标" + nWhenChangX + "和Y坐标" + nWhenChangY);
            })
            document.getElementsByTagName('body')[0].addEventListener('touchend', function(e) {
                touch.changY = e.changedTouches[0].pageY;
                touch.changX = e.changedTouches[0].pageX;
                //console.log("滑动后的X坐标" + nChangX + "和Y坐标" + nChangY);
                var swDirection = direction(touch.startX, touch.changX, touch.startY, touch.changY);
                console.log(swDirection);
                //以回调的方法来写这个动作
                if(swDirection == 'Up') {
                    swipeUp(function() {
                        if(isAnimating) return;
                        last.row = now.row;
                        last.col = now.col;
                        if(now.col == 2) {
                            return;
                        } else if(last.row != 6) {
                            now.row = last.row + 1;
                            now.col = 1;
                            pageMove(towards.up);
                        }
                    })
                }
                if(swDirection == 'Down') {
                    if(isAnimating) return;
                    last.row = now.row;
                    last.col = now.col;
                    if(now.col == 2) {
                        return;
                    } else if(last.row != 1) {
                        now.row = last.row - 1;
                        now.col = 1;
                        pageMove(towards.down);
                    }
                }
                if(swDirection == 'Left') {
                    if(isAnimating) return;
                    last.row = now.row;
                    last.col = now.col;
                    if(last.row > 1 && last.row < 5 && last.col == 1) {
                        now.row = last.row;
                        now.col = 2;
                        pageMove(towards.left);
                    }
                }
                if(swDirection == 'Right') {
                    if(isAnimating) return;
                    last.row = now.row;
                    last.col = now.col;
                    if(last.row > 1 && last.row < 5 && last.col == 2) {
                        now.row = last.row;
                        now.col = 1;
                        pageMove(towards.right);
                    }
                }
            })
            function swipeUp(callback) {
                callback()
            }
            function hasClass(obj, cls) {
                return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
            }
            console.log(window.document)
            function addClass(obj, cls) {
                if(!hasClass(obj, cls)) obj.className += " " + cls;
            }
            function removeClass(obj, cls) {
                if(hasClass(obj, cls)) {
                    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                    obj.className = obj.className.replace(reg, ' ');
                }
            }
            function toggleClass(obj, cls) {
                if(hasClass(obj, cls)) {
                    removeClass(obj, cls);
                } else {
                    addClass(obj, cls);
                }
            }
            function pageMove(tw) {
                console.log(now);
                console.log(now);
                var lastPage = ".page-" + last.row + "-" + last.col,
                    nowPage = ".page-" + now.row + "-" + now.col;
                switch(tw) {
                    case towards.up:
                        outClass = 'pt-page-moveToTop';
                        inClass = 'pt-page-moveFromBottom';
                        break;
                    case towards.right:
                        outClass = 'pt-page-moveToRight';
                        inClass = 'pt-page-moveFromLeft';
                        break;
                    case towards.down:
                        outClass = 'pt-page-moveToBottom';
                        inClass = 'pt-page-moveFromTop';
                        break;
                    case towards.left:
                        outClass = 'pt-page-moveToLeft';
                        inClass = 'pt-page-moveFromRight';
                        break;
                }
                isAnimating = true;
                var $nowPage = document.querySelector(nowPage);
                var $lastPage = document.querySelector(lastPage);
                console.log($nowPage);
                removeClass($nowPage, "hide");
                addClass($lastPage, outClass)
                addClass($nowPage, inClass);
                setTimeout(function() {
                    removeClass($lastPage, 'page-current');
                    removeClass($lastPage, outClass);
                    addClass($lastPage, "hide");
                    addClass($nowPage, 'page-current');
                    removeClass($nowPage, inClass);
                    isAnimating = false;
                }, 600);
            }
        })()
    </script>
    <style>
        body {
            width: 100%;
            overflow: hidden;
        }
        
        .page {
            width: 100%;
            height: 100%;
            position: absolute;
            font-size: 100px;
            text-align: center;
        }
        
        .page .wrap {
            height: 500px;
        }
        
        .page-1-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }
        
        .page-2-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }
        
        .page-2-2 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }
        
        .page-3-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }
        
        .page-3-2 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }
        
        .page-4-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }
        
        .page-4-2 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }
        
        .page-5-1 {
            background-image: url(img/background/1.png);
            background-size: cover;
        }
        
        .page-current {
            z-index: 1;
        }
        
        .hide {
            display: none;
        }
        
        .pt-page-moveToTop {
            -webkit-animation: moveToTop .6s ease both;
            animation: moveToTop .6s ease both;
        }
        
        @-webkit-keyframes moveToTop {
            from {}
            to {
                -webkit-transform: translateY(-100%);
            }
        }
        
        .pt-page-moveFromBottom {
            -webkit-animation: moveFromBottom .6s ease both;
            animation: moveFromBottom .6s ease both;
        }
        
        @-webkit-keyframes moveFromBottom {
            from {
                -webkit-transform: translateY(100%);
            }
        }
        
        .pt-page-moveToBottom {
            -webkit-animation: moveToBottom .6s ease both;
            animation: moveToBottom .6s ease both;
        }
        
        @-webkit-keyframes moveToBottom {
            from {}
            to {
                -webkit-transform: translateY(100%);
            }
        }
        
        .pt-page-moveFromTop {
            -webkit-animation: moveFromTop .6s ease both;
            animation: moveFromTop .6s ease both;
        }
        
        @-webkit-keyframes moveFromTop {
            from {
                -webkit-transform: translateY(-100%);
            }
        }
        
        .pt-page-moveToRight {
            -webkit-animation: moveToRight .6s ease both;
            animation: moveToRight .6s ease both;
        }
        
        @-webkit-keyframes moveToRight {
            from {}
            to {
                -webkit-transform: translateX(100%);
            }
        }
        
        .pt-page-moveToLeft {
            -webkit-animation: moveToLeft .6s ease both;
            animation: moveToLeft .6s ease both;
        }
        
        @-webkit-keyframes moveToLeft {
            from {}
            to {
                -webkit-transform: translateX(-100%);
            }
        }
    </style>

</html>

触摸前后

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--利用touchstart和touchend触摸前后监听到的四个坐标分别是触摸前的x，y坐标和触摸后的x，y坐标，
        然后用数学公式进行运算得出方向-->
    </body>
    <script type="text/javascript">
        document.getElementsByTagName('body')[0].addEventListener('touchstart', function(e) {
                touch.startY = e.targetTouches[0].pageY;
                touch.startX = e.targetTouches[0].pageX;
                //console.log("点击时的X坐标" + nStartX + "和Y坐标" + nStartY);
            });
        document.getElementsByTagName('body')[0].addEventListener('touchmove', function(e) {
                touch.whenChangY = e.changedTouches[0].pageY;
                touch.whenChangX = e.changedTouches[0].pageX;
                //console.log("滑动时的X坐标" + nWhenChangX + "和Y坐标" + nWhenChangY);
            })
        document.getElementsByTagName('body')[0].addEventListener('touchend', function(e) {
                touch.changY = e.changedTouches[0].pageY;
                touch.changX = e.changedTouches[0].pageX;
                //console.log("滑动后的X坐标" + nChangX + "和Y坐标" + nChangY);
                var swDirection = direction(touch.startX, touch.changX, touch.startY, touch.changY);
    </script>
</html>

GitHub地址：https://github.com/lianglixiong

猜你喜欢

转载自www.cnblogs.com/LLX8/p/9212405.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022