zoukankan      html  css  js  c++  java
  • 左右滑动事件的绑定

    很多时候需要判断上下左右滑动的事件,比如最近很多的小游戏,“消消乐”

    需要将一个滑块左右拖动,或者上下拖动

    <h1>拖动事件</h1>
    	<ul id="ul" style="306px;">
    	<li><div></div></li>
    	<li><div></div></li>
    	<li><div></div></li>
    	<li><div></div></li>
    	<li><div></div></li>
    	<li><div></div></li>
    	<ul>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
     li{
    	list-style:none;
     }
     div{
    	display:block;
    	border:1px solid red;
    	100px;
    	height:100px;
    	float:left;
     }
    </style>
    <script>
    bindTouch();
    function bindTouch(){//绑定touch事件
    	var startX = 0;
    	var startY = 0;
    	var This = this;
    	var izIndex = 2;
    	var startThis = null;
    	this.oUl=$("ul");
    	this.oUl.delegate("li","touchstart mousedown",function(event){
    		var data=event.originalEvent.changedTouches?event.originalEvent.changedTouches[0]:event;
    		startX = data.clientX;
    		startY = data.clientY;
    		startThis = this;
    		return false;
    	});
    	this.oUl.delegate("li","touchend mouseup",function(event){
    		
    		var data=event.originalEvent.changedTouches?event.originalEvent.changedTouches[0]:event;
    		if((Math.abs(startX-data.clientX)>10)||(Math.abs(startY-data.clientY)>10)){
    			$(startThis).css("zIndex",izIndex++);
    			
    			//左右
    			if(Math.abs(startX-data.clientX)>Math.abs(startY-data.clientY)){
    				if(startX<data.clientX){//→
    					//todo 右滑事件
    					alert("右滑→");
    				}else{//←
    					//todo 左滑事件
    					alert("左滑←");
    				}
    			}
    			//上下
    			else{
    				if(startY<data.clientY){//↓
    					//todo  下滑事件
    					alert("下滑↓");
    				}else{//↑
    					//todo 上滑事件
    					alert("上滑↑");
    				}
    			}
    		}
    	});
    }
    </script>
    

      

    效果:

  • 相关阅读:
    列表,表格与媒体元素
    【Mac + Appium + Python3.6学习(三)】之IOS自动化测试环境配置
    Mac 下的自动化学习
    【Mac + Appium + Python3.6学习(二)】之Android自动化测试,appium-desktop配置和简易自动化测试脚本
    【Mac + Appium学习(一)】之安装Appium环境前提准备
    anyproxy-初识使用
    fiddler 学习教程
    Linux学习
    python 接口自动化
    python 学习教程
  • 原文地址:https://www.cnblogs.com/1906859953Lucas/p/10559282.html
Copyright © 2011-2022 走看看