移动端上下拖动调整顺序效果_基于swiper的手机移动端上下滑动效果

2015-04-21 06:40:52

我前几篇文章中我介绍过一种手机移动端上下滑动的效果，那个效果是通过zepto来实现的，今天我来介绍一种基于swiper实现手机端上下滑动的效果。我先来贴出body内的代码

代码中每个section为一个页面，总共为6个页面，也就是说能够滑动6个页面。每个页面都有一个向下的箭头，来提示下滑。

再来看一下js代码

var init = new Object();

init.thisId = 0;

var reg = new RegExp("(^|&)page=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if(r!=null){

init.thisId = 2;

$('#sec01,#sec02').css('top','-100%');

$('#sec03').css('top','0');

}

$(window).load(function() {

$('#loading').fadeOut();

setTimeout(function() {

$('#main').fadeIn();

}, 6000);

});

/**

* 滑动锁 true为解锁状态可以滑动

* false为锁定状态不能滑动

*/

init.swipeLock = true;

init.swipeSpeed = 0.8;

init.height = document.documentElement.clientHeight;

var tl = new TimelineLite();

TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'0%'});

init.body = function(){

}

$("#main").swipe({

swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {

$('#sec011').html(distance);

if(fingerCount>1)return;

if(distance<=75)return;

if(!init.swipeLock)return;

if(direction=='up'){

//向上滑

if ((init.thisId>=0) && (init.thisId

$('#main .main').eq(init.thisId).css('top',75-distance+'px');

$('#main .main').eq(init.thisId+1).css('top',init.height+75-distance+'px');

$('#main .main').eq(init.thisId+1).show();

} else{

$('#main_bottom').css('height',distance-75);

$('#main_bottom').css('opacity',(distance-75)/(init.height*0.15));

}

};

if(direction=='down'){

//向下滑

if ((init.thisId>0) && (init.thisId

$('#main .main').eq(init.thisId).css('top',distance-75+'px');

$('#main .main').eq(init.thisId-1).css('top',distance-75-init.height+'px');

$('#main .main').eq(init.thisId-1).show();

} else{

$('#main_top').css('height',distance-75);

$('#main_top').css('opacity',(distance-75)/(init.height*0.15));

}

};

},

swipe:function(event, direction, distance, duration, fingerCount) {

if(fingerCount>1)return;

if(distance<10)return;

if(!init.swipeLock)return;

if(direction=='up'){

if ((init.thisId>=0) && (init.thisId

try{

//init.swipeLock = false;

TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'-100%'});

TweenMax.to($('#main .main').eq(init.thisId+1),init.swipeSpeed,{top:'0%'});

init.thisId++;

setTimeout(function(){

$('#main .main').eq(init.thisId-1).hide();

init.swipeLock = true;

},init.swipeSpeed*1000);

}catch(e){

console.log(e);

}

}else{

if (init.thisId==($('#main .main').length-1)) {

TweenMax.to('#main_bottom',init.swipeSpeed,{height:'5%',opacity:'0'});

}

};

};

if(direction=='down'){

//init.swipeLock = false;

if ((init.thisId>0) && (init.thisId

try{

init.swipeLock = false;

TweenMax.to($('#main .main').eq(init.thisId),init.swipeSpeed,{top:'100%'});

TweenMax.to($('#main .main').eq(init.thisId-1),init.swipeSpeed,{top:'0%'});

init.thisId--;

setTimeout(function(){

$('#main .main').eq(init.thisId+1).hide();

init.swipeLock = true;

},init.swipeSpeed*1000);

}catch(e){

console.log(e);

}

}else{

if(init.thisId==0){

TweenMax.to('#main_top',init.swipeSpeed,{height:'5%',opacity:'0'});

}

};

};

},

});

/**

* 阻止触摸

document.addEventListener('touchmove', function (event) {

event.preventDefault();

}, false);

*/

这里所设置的是滑动效果和箭头的效果，我就不在多说了，大家可以看一下演示效果，整体的文件本站提供下载，需要的朋友可以下载下来看看。