實現手機端上下左右滑屏的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移動客戶端--觸屏滑動/重力感應

 

祝大家新年快樂