【web移动端】划屏上下翻页效果_监听iphone右滑动上下一页-CSDN博客

本文链接：https://blog.csdn.net/snow_finland/article/details/44493609

需要调用到改写过的jquery touchswipe（原来插件监听的是左右滑动，这里改写为上下滑动）

/**
 * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)
 * Common usage: wipe images (left and right to show the previous or next image)
 * 
 * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
 * @version 1.0 (15th July 2010)
 */
(function($) { 
   $.fn.touchwipe = function(settings) {
     var config = {
			min_move_y: 20,
			wipeTop: function() { alert("top"); },
 			wipeBottom: function() { alert("bottom"); },
			preventDefaultEvents: true
	 };
     
     if (settings) $.extend(config, settings);
 
     this.each(function() {
    	 var startY;
		 var isMoving = false;

    	 function cancelTouch() {
    		 this.removeEventListener('touchmove', onTouchMove);
			 startY = null;
    		 isMoving = false;
    	 }	
    	 
    	 function onTouchMove(e) {
    		 if(config.preventDefaultEvents) {
    			 e.preventDefault();
    		 }
    		 if(isMoving) {				 
				 var y = e.touches[0].pageY;
	    		 var dy = startY - y;
	    		 if(Math.abs(dy) >= config.min_move_y) {
	    			cancelTouch();
	    			if(dy > 0) {
	    				config.wipeTop();
	    			}
	    			else {
	    				config.wipeBottom();
	    			}
	    		 }
    		 }
    	 }
    	 
    	 function onTouchStart(e)
    	 {
    		 if (e.touches.length == 1) {
    			 startY = e.touches[0].pageY;
    			 isMoving = true;
    			 this.addEventListener('touchmove', onTouchMove, false);
    		 }
    	 }    	 
    		 
		 this.addEventListener('touchstart', onTouchStart, false);
     });
 
     return this;
   };
 
 })(jQuery);

主页面：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<title>Swipe Test</title>
<style type="text/css">
html,body,div,ul,li,p,span,img,em,i{
	margin:0;
	padding:0;
}
.swipe_wrap{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.box1{
	background-color:#C30;
}
.box2{
	background-color:#FF9;
}
.box3{
	background-color:#6C9;
}
.box4{
	background-color:#69F;
}

.animate1 *,
.animate2{
	opacity:0;
}
@keyframes fadeInRight{
	0%,
	60%{
		opacity:0;
		transform:translate3d(50%,0,0);
	}
	100%{
		opacity:1;
		transform:none;
	}
}

@-moz-keyframes fadeInRight /* Firefox */
{
	0%,
	60%{
		opacity:0;
		transform:translate3d(50%,0,0);
		-moz-transform:translate3d(50%,0,0);
	}
	100%{
		opacity:1;
		transform:none;
		-moz-transform:none;
	}
}

@-webkit-keyframes fadeInRight /* Safari 和 Chrome */
{
	0%,
	60%{
		opacity:0;
		transform:translate3d(50%,0,0);
		-webkit-transform:translate3d(50%,0,0);
	}
	100%{
		opacity:1;
		transform:none;
		-webkit-transform:none;
	}
}

@-o-keyframes fadeInRight /* Opera */
{
	0%,
	60%{
		opacity:0;
		transform:translate3d(50%,0,0);
		-o-transform:translate3d(50%,0,0);
	}
	100%{
		opacity:1;
		transform:none;
		-o-transform:none;
	}
}

@keyframes fadeInOpacity{
	0%,
	60%{opacity:0;}
	100%{opacity:1;}
}

@-moz-keyframes fadeInOpacity /* Firefox */
{
	0%,
	60%{opacity:0;}
	100%{opacity:1;}
}

@-webkit-keyframes fadeInOpacity /* Safari 和 Chrome */
{
	0%,
	60%{opacity:0;}
	100%{opacity:1;}
}

@-o-keyframes fadeInOpacity /* Opera */
{
	0%,
	60%{opacity:0;}
	100%{opacity:1;}
}


.swipe_box_show .animate1 :nth-child(1){
	opacity:1;
	animation: fadeInRight 1s ease-out;
	-moz-animation: fadeInRight 1s ease-out;
	-webkit-animation: fadeInRight 1s ease-out;
	-o-animation: fadeInRight 1s ease-out;
}
.swipe_box_show .animate1 :nth-child(2){
	opacity:1;
	animation: fadeInRight 2s ease-out;
	-moz-animation: fadeInRight 2s ease-out;
	-webkit-animation: fadeInRight 2s ease-out;
	-o-animation: fadeInRight 2s ease-out;
}
.swipe_box_show .animate1 :nth-child(3){
	opacity:1;
	animation: fadeInRight 3s ease-out;
	-moz-animation: fadeInRight 3s ease-out;
	-webkit-animation: fadeInRight 3s ease-out;
	-o-animation: fadeInRight 3s ease-out;
}
.swipe_box_show .animate1 :nth-child(4){
	opacity:1;
	animation: fadeInRight 4s ease-out;
	-moz-animation: fadeInRight 4s ease-out;
	-webkit-animation: fadeInRight 4s ease-out;
	-o-animation: fadeInRight 4s ease-out;
}
.swipe_box_show .animate2{
	opacity:1;
	animation: fadeInOpacity 2s ease-out;
	-moz-animation: fadeInOpacity 2s ease-out;
	-webkit-animation: fadeInOpacity 2s ease-out;
	-o-animation: fadeInOpacity 2s ease-out;
}
</style>
</head>

<body>
<div class="swipe_wrap" id="J_swipe_area">
	<div class="swipe_inner" id="J_swipe_inner">
    	<div class="swipe_box box1">
        </div>
        <div class="swipe_box box2">
        	<ul class="animate1">
            	<li>1首先</li>
                <li>2其次</li>
                <li>3然后</li>
                <li>4最后</li>
            </ul>
        </div>
        <div class="swipe_box box3">
			<img src="aaa.png" class="animate2" />
        </div>
        <div class="swipe_box box4">
        </div>
    </div>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.touchwipe.js"></script>
<script type="text/javascript">
var window_h = $(window).height();
var window_w = $(window).width();
var page = {
	now : 1,
	total : 4,
	change : function(type){
		var self = this;
		var page_change;
		if(type == 'next'){
			page_change = self.now - - 1;
		}else{
			page_change = self.now - 1;
		}
		var y = (page_change - 1) * window_h;
		$('#J_swipe_inner').css({'transform':'translateY(-'+y+'px)','-moz-transform':'translateY(-'+y+'px)','-webkit-transform':'translateY(-'+y+'px)','-o-transform':'translateY(-'+y+'px)','transition':'all 0.5s ease-out','-moz-transition':'all 0.5s ease-out','-webkit-transition':'all 0.5s ease-out','-o-transition':'all 0.5s ease-out'});
		$('.swipe_box').siblings().removeClass('swipe_box_show');
		$('.swipe_box').eq(page_change - 1).addClass('swipe_box_show');
		self.now = page_change;
	}
}
$(document).ready(function(){	
	$('.swipe_box').height(window_h);
	
	$('#J_swipe_area').touchwipe({
		wipeTop:function(){//next
			if(page.now < page.total){
				page.change('next');
			}else{
				alert('已经是最后了');
			}
		},
		wipeBottom:function(){//previous
			if(page.now > 1){
				page.change('prev');
			}else{
				alert('已经是第一页了');
			}
		}
	});
});
</script>
</body>
</html>

在页面加载完的时候，根据屏幕高度重新调整每个小页面的高度，保证小页面高度和屏幕高度一致，这样页面滑动的时候一屏就是一个小页面的内容；

其中字，图片出现的顺序则通过css3的animate控制