【web移动端】划屏上下翻页效果
需要调用到改写过的jquery touchswipe（原来插件监听的是左右滑动，这里改写为上下滑动）
/**
* jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)
* Common usage: wipe images (left and right to show the previous or next image)
*
* @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
* @version 1.0 (15th July 2010)
*/
(function($) {
$.fn.touchwipe = function(settings) {
var config = {
min_move_y: 20,
wipeTop: function() { alert("top"); },
wipeBottom: function() { alert("bottom"); },
preventDefaultEvents: true
};
if (settings) $.extend(config, settings);
this.each(function() {
var startY;
var isMoving = false;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startY = null;
isMoving = false;
}
function onTouchMove(e) {
if(config.preventDefaultEvents) {
e.preventDefault();
}
if(isMoving) {
var y = e.touches[0].pageY;
var dy = startY - y;
if(Math.abs(dy) >= config.min_move_y) {
cancelTouch();
if(dy > 0) {
config.wipeTop();
}
else {
config.wipeBottom();
}
}
}
}
function onTouchStart(e)
{
if (e.touches.length == 1) {
startY = e.touches[0].pageY;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
}
}
this.addEventListener('touchstart', onTouchStart, false);
});
return this;
};
})(jQuery);
主页面：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<title>Swipe Test</title>
<style type="text/css">
html,body,div,ul,li,p,span,img,em,i{
margin:0;
padding:0;
}
.swipe_wrap{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
}
.box1{
background-color:#C30;
}
.box2{
background-color:#FF9;
}
.box3{
background-color:#6C9;
}
.box4{
background-color:#69F;
}
.animate1 *,
.animate2{
opacity:0;
}
@keyframes fadeInRight{
0%,
60%{
opacity:0;
transform:translate3d(50%,0,0);
}
100%{
opacity:1;
transform:none;
}
}
@-moz-keyframes fadeInRight /* Firefox */
{
0%,
60%{
opacity:0;
transform:translate3d(50%,0,0);
-moz-transform:translate3d(50%,0,0);
}
100%{
opacity:1;
transform:none;
-moz-transform:none;
}
}
@-webkit-keyframes fadeInRight /* Safari 和 Chrome */
{
0%,
60%{
opacity:0;
transform:translate3d(50%,0,0);
-webkit-transform:translate3d(50%,0,0);
}
100%{
opacity:1;
transform:none;
-webkit-transform:none;
}
}
@-o-keyframes fadeInRight /* Opera */
{
0%,
60%{
opacity:0;
transform:translate3d(50%,0,0);
-o-transform:translate3d(50%,0,0);
}
100%{
opacity:1;
transform:none;
-o-transform:none;
}
}
@keyframes fadeInOpacity{
0%,
60%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes fadeInOpacity /* Firefox */
{
0%,
60%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes fadeInOpacity /* Safari 和 Chrome */
{
0%,
60%{opacity:0;}
100%{opacity:1;}
}
@-o-keyframes fadeInOpacity /* Opera */
{
0%,
60%{opacity:0;}
100%{opacity:1;}
}
.swipe_box_show .animate1 :nth-child(1){
opacity:1;
animation: fadeInRight 1s ease-out;
-moz-animation: fadeInRight 1s ease-out;
-webkit-animation: fadeInRight 1s ease-out;
-o-animation: fadeInRight 1s ease-out;
}
.swipe_box_show .animate1 :nth-child(2){
opacity:1;
animation: fadeInRight 2s ease-out;
-moz-animation: fadeInRight 2s ease-out;
-webkit-animation: fadeInRight 2s ease-out;
-o-animation: fadeInRight 2s ease-out;
}
.swipe_box_show .animate1 :nth-child(3){
opacity:1;
animation: fadeInRight 3s ease-out;
-moz-animation: fadeInRight 3s ease-out;
-webkit-animation: fadeInRight 3s ease-out;
-o-animation: fadeInRight 3s ease-out;
}
.swipe_box_show .animate1 :nth-child(4){
opacity:1;
animation: fadeInRight 4s ease-out;
-moz-animation: fadeInRight 4s ease-out;
-webkit-animation: fadeInRight 4s ease-out;
-o-animation: fadeInRight 4s ease-out;
}
.swipe_box_show .animate2{
opacity:1;
animation: fadeInOpacity 2s ease-out;
-moz-animation: fadeInOpacity 2s ease-out;
-webkit-animation: fadeInOpacity 2s ease-out;
-o-animation: fadeInOpacity 2s ease-out;
}
</style>
</head>
<body>
<div class="swipe_wrap" id="J_swipe_area">
<div class="swipe_inner" id="J_swipe_inner">
<div class="swipe_box box1">
</div>
<div class="swipe_box box2">
<ul class="animate1">
<li>1首先</li>
<li>2其次</li>
<li>3然后</li>
<li>4最后</li>
</ul>
</div>
<div class="swipe_box box3">
<img src="aaa.png" class="animate2" />
</div>
<div class="swipe_box box4">
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.touchwipe.js"></script>
<script type="text/javascript">
var window_h = $(window).height();
var window_w = $(window).width();
var page = {
now : 1,
total : 4,
change : function(type){
var self = this;
var page_change;
if(type == 'next'){
page_change = self.now - - 1;
}else{
page_change = self.now - 1;
}
var y = (page_change - 1) * window_h;
$('#J_swipe_inner').css({'transform':'translateY(-'+y+'px)','-moz-transform':'translateY(-'+y+'px)','-webkit-transform':'translateY(-'+y+'px)','-o-transform':'translateY(-'+y+'px)','transition':'all 0.5s ease-out','-moz-transition':'all 0.5s ease-out','-webkit-transition':'all 0.5s ease-out','-o-transition':'all 0.5s ease-out'});
$('.swipe_box').siblings().removeClass('swipe_box_show');
$('.swipe_box').eq(page_change - 1).addClass('swipe_box_show');
self.now = page_change;
}
}
$(document).ready(function(){
$('.swipe_box').height(window_h);
$('#J_swipe_area').touchwipe({
wipeTop:function(){//next
if(page.now < page.total){
page.change('next');
}else{
alert('已经是最后了');
}
},
wipeBottom:function(){//previous
if(page.now > 1){
page.change('prev');
}else{
alert('已经是第一页了');
}
}
});
});
</script>
</body>
</html>
在页面加载完的时候，根据屏幕高度重新调整每个小页面的高度，保证小页面高度和屏幕高度一致，这样页面滑动的时候一屏就是一个小页面的内容；
其中字，图片出现的顺序则通过css3的animate控制