实现手机端上下左右滑屏的jq原生代码和使用库·两种办法

先来一个原生的。我使用的是jq。

需要注意的地方就是被触发的元素最好不要是body，这个代码也可以修改，如果obj传进来的是body那么，$(this)必须是你的监听元素，不然会冒泡泡，整个项目就……。

原理很简单哦，绑定具体事件分别是：

1.事件一：touchstart：触摸开始；【touch:触摸；start：开始】
         originalEvent【original：最初的；Event：事件】
         changedTouches【改变触摸】
         我们理解为，一开始触摸时候的坐标，我们获取到了。
2.事件二：touchmove【触摸移动，这时候我们手指在屏幕上开始滑动了】
        然而要获取它的移动中的坐标，我们需要写点兼容代码：touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
        然后就是二元运算了，当我们移动的坐标减去开始触摸的坐标，如果满足我们的条件就执行我们要的效果。
3.事件三：touchend【触摸结束】
         当手指离开屏幕，该干嘛干嘛。

function addEvetnDown(obj) {
    $(obj).on('touchstart', function(e) {
        var touch = e.originalEvent,
            startX = touch.changedTouches[0].pageX;
            startY = touch.changedTouches[0].pageY;
        $(this).on('touchmove', function(e) {
            touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
            if (touch.pageX - startX > 10) {
                console.log("右划");
               /*你的操作代码*/
                $(this).off('touchmove');
            } else if (touch.pageX - startX < -10) {
                console.log("左划");
                 /*你的操作代码*/
                $(this).off('touchmove');
            };
            if (touch.pageY - startY > 100) {
                console.log("下划");
               /*你的操作代码*/
                //$(this).off('touchmove');
            } else if (touch.pageY - startY <= -1) {
                console.log("上划");
                /*你的操作代码*/
                //$(this).off('touchmove');
            };
            e.preventDefault();
            e.stopPropagation();
        });

       return false;

    }).on('touchend', function() {
        $(this).off('touchmove');
    });
}

　　

下面这个呢，就没什么好说的了，看了网上有的朋友说在ios下有点兼容性什么的，也不知道是真的假的，反正有问题就修改呗。

首先引入jq和jq插件

     <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
     <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>

然后css你的样式啊，还有你的界面啊什么的，下面是js部分

$(document).ready(
			function() {
				var nowpage = 0;
				//给最大的盒子增加事件监听
				$(".container").swipe(
					{
						swipe:function(event, direction, distance, duration, fingerCount) {
							 if(direction == "up"){
							 	nowpage = nowpage + 1;
							 }else if(direction == "down"){
							 	nowpage = nowpage - 1;
							 }

							 if(nowpage > 4){
							 	nowpage = 4;
							 }

							 if(nowpage < 0){
							 	nowpage = 0;
							 }

							$(".container").animate({"top":nowpage * -100 + "%"},400);

							$(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");
						}
					}
				);
			}
		);

　　看了官方的文档说明，说是可以兼容ie8的，也不知道是真的假的。

还有原生js的写法，我认为有简单省事的办法就尽可能不给自己找麻烦。这里给个链接，就不写el。

1.js移动客户端--触屏滑动

2.js移动客户端--触屏滑动/重力感应

祝大家新年快乐