zoukankan      html  css  js  c++  java
  • 移动端滑动效果

    移动端滑动效果(图片需要自己加载)

    <!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 {
    				 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>
    

      

  • 相关阅读:
    新年新方向-斩获新职位
    专利之家:让灵感冒冒泡
    转帖:专利之家
    WPF:Localization 基础
    WPF教程.002
    有关XXX产品研发管理约定
    转帖:曲线路标北京前门上岗
    超出想象-超级终端显示器
    小e的每日一画 之 小男孩在太阳下敬礼 20080102
    小e的每日一画 之 飞毯旅行记 20071231
  • 原文地址:https://www.cnblogs.com/handsomehan/p/5920089.html
Copyright © 2011-2022 走看看