基于jQuery手機上手指上下滑動滾屏特效



50 198 67



特效描述:基于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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 全屏滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表