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>
    

      

    效果:

  • 相关阅读:
    1.2 偏差与方差
    深度学习中Xavier初始化
    1.1 训练/开发/测试集
    Python笔记(5)类__方法与继承
    Python笔记(4)类__属性与描述符
    Python笔记(3)迭代器与生成器
    Python笔记(2)函数
    线性回归 Linear Regression
    Python笔记(1)变量与表达式
    跳转到某个Activity
  • 原文地址:https://www.cnblogs.com/1906859953Lucas/p/10559282.html
Copyright © 2011-2022 走看看