移动端滑动效果

移动端滑动效果（图片需要自己加载）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>移动端滑动效果</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			img {
				width: 100%;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="page1">
			<img src="images/bg1.jpg"/>
		</div>
		<div id="page2">
			<img src="images/bg2.jpg"/>
		</div>
		<div id="page3">
			<img src="images/bg3.jpg"/>
		</div>
		<div id="page4">
			<img src="images/bg4.jpg"/>
		</div>
		<div id="page5">
			<img src="images/bg5.jpg"/>
		</div>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var startY = 0, 
				endY = 0, 
				n = 1, 
				flag = false;
				document.addEventListener('touchstart', function(e) {
					startY = e.targetTouches[0].pageY;
				}, false);
				document.addEventListener('touchmove', function(e) {
					e.preventDefault();//阻止窗口滚动条滚动;
					endY = e.targetTouches[0].pageY;
					if (startY - endY > 100 || startY - endY < -100) {
						flag = true;
					};
				}, false);
				document.addEventListener('touchend', function(e) {
					if (flag) {
						flag = false;
						if (startY - endY > 100) {//上滑动
							if (n >= 5) {
								n = 5;
								return false;
							};
							switch(n) {
								case 1: $('#page1').slideUp(300).next().show();
										break;
								case 2: $('#page2').slideUp(300).next().show();
										break;
								case 3: $('#page3').slideUp(300).next().show();
										break;
								case 4: $('#page4').slideUp(300).next().show();
										break;
							};
							n ++;
						}else if (startY - endY < -100) {//下滑动
							if (n <= 1) {
								n = 1;
								return false;
							};
							switch (n){
								case 5: $('#page4').slideDown(300,function() {
									$('#page5').hide();
								});
									break;
								case 4: $('#page3').slideDown(300,function() {
									$('#page4').hide();
								});
									break;
								case 3: $('#page2').slideDown(300,function() {
									$('#page3').hide();
								});
									break;
								case 2: $('#page1').slideDown(300,function() {
									$('#page2').hide();
								});
									break;
							}
							n --;
						};
					} else{
						return false;
					};
				}, false);
		</script>
	</body>
</html>

　　

posted @ 2016-09-29 15:30  HandsomeHan  阅读(903)  评论(0)    收藏  举报