基于jQuery手机上手指上下滑动滚屏特效

特效描述：基于jQuery 手指上下滑动滚屏特效，基于jQuery手机上手指上下滑动滚屏特效

代码结构

1. 引入JS

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

2. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.container{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0%;
		}
		.container .page{
			height: 100%;
			position: relative;
		}
		.container .page0{
			background-color: blue;
		}
		.container .page1{
			background-color: pink;
		}
		.container .page2{
			background-color: yellow;
		}
		.container .page3{
			background-color: green;
		}
		.container .page4{
			background-color: tomato;
		}
		.container .page1 img.no1{
			position: absolute;
			left: 10px;
			top: 50px;
			-webkit-transition:all 1s ease 0s;
		}
		.container .page1.cur img.no1{
			-webkit-transform:rotate(720deg);
		}
		.container .page1 img.no2{
			position: absolute;
			left: 600px;
			top: 50px;
			-webkit-transition:all 1s ease 2s;
		}
		.container .page1.cur img.no2{
			left: 30px;
			top: 100px;
			-webkit-transform:rotate(720deg);
		}
		.xiangxiatishi{
			position: fixed;
			bottom: 20px;
			left: 50%;
			-webkit-transform:translateX(-50%);
			-webkit-animation:dong 1s linear 0s infinite alternate;
		}
		@-webkit-keyframes dong{
			from{
				bottom:20px;
			}
			to{
				bottom: 60px;
			}
		}
	</style>
	<script type="text/javascript">
		$(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");
						}
					}
				);
			}
		);
	</script>
</head>
<body onmousewheel="return false;">
	<div class="container">
		<div class="page page0 cur"><h1>你好，我是0号屏幕</h1>
		</div>
		</div>
		<div class="page page1">
			<h1>你好，我是1号屏幕</h1>
			<img class="no1" src="img/1.png" />
			<img class="no2" src="img/2.png" />
		</div>
		<div class="page page2"><h1>你好，我是2号屏幕</h1></div>
		<div class="page page3"><h1>你好，我是3号屏幕</h1></div>
		<div class="page page4"><h1>你好，我是4号屏幕</h1></div>
	</div>
	<img  class="xiangxiatishi" src="img/prompt.png" />
</body>
</html>