zoukankan      html  css  js  c++  java
  • 移动端,判断滑动方向

    直接看代码:

    <!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, minimum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>移动端,判断滑动方向</title>
        <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>
    </head>
    
    <body> 
        <script type="text/javascript">
    		var windowHeight = $(window).height();
    		$("body").css("height", windowHeight);
    		var startX, startY, moveEndX, moveEndY, X, Y;
    		$("body").on("touchstart", function(e) {
    			e.preventDefault();
    			startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY;
    		});
    		$("body").on("touchmove", function(e) {
    			e.preventDefault();
    			moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY;
    			if (Math.abs(X) > Math.abs(Y) && X > 0) {
    				alert("left to right");
    			} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
    				alert("right to left");
    			} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
    				alert("top to bottom");
    			} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
    				alert("bottom to top");
    			} else {
    				alert("just touch");
    			}
    		});
        </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    Flume-NG源码分析-整体结构及配置载入分析
    Flume之核心架构深入解析
    使用maven构建scala项目
    大数据的一些面试题
    HBase原理和设计
    Hive UDAF开发详解
    Hive UDTF开发指南
    Hive UDF开发指南
    局域网访问电脑中VMware虚拟机
    百度面试-前端
  • 原文地址:https://www.cnblogs.com/jone-chen/p/6118930.html
Copyright © 2011-2022 走看看