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