利用jquery.touchSwipe.js实现的移动滑屏
申浩广
<!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>jquery.touchSwipe 手机上下滑屏特效代码</title>
<style>
* { 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; color:#fff;text-align:center; }
.container .page h1{padding-top:120px; line-height:50px; display:block}
.container .page0 { background-color: blue; }
.container .page1 { background-color:#93F; }
.container .page2 { background-color:#F90; }
.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>
</head>
<body onmousewheel="return false;">
<span style="display:none;">
</span><!--代码部分begin-->
<div class="container">
<div class="page page0 cur">
<h1>你好，我是0号屏幕，第一屏,鼠标单击向下拖动</h1>
</div>
<div class="page page1">
<h1>你好，我是1号屏幕，鼠标单击向下/向上拖动</h1>
</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>
<script src="http://www.lanrenzhijia.com/ajaxjs/1.11.1/jquery-1.11.1.min.js"></script>
<script src="http://demo.lanrenzhijia.com/2015/touchSwipe0313/js/jquery.touchSwipe.min.js"></script>
<script>
$(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>
<!--代码部分end-->
</body>
</html>
类似资料：