基于swiper的手机移动端上下滑动效果
2015-04-21 14:40:52
我前几篇文章中我介绍过一种手机移动端上下滑动的效果，那个效果是通过zepto来实现的，今天我来介绍一种基于swiper实现手机端上下滑动的效果。我先来贴出body内的代码
<body onload="init.body()">
<div id="main" class="main">
<img id="main_top" src="img/top.png" />
<section id='sec01' class="main" style="background: blue;">
<img class="bg" src="img/1.png" />
<img src="img/P1/jiantou.png" class="center jiantou" />
</section>
<section id='sec02' class="main none" style="background: blue;">
<img class="bg" src="img/2.png" />
<img src="img/P1/jiantou.png" class="center jiantou" />
</section>
<section id='sec03' class="main none" style="background: blue;">
<img class="bg" src="img/3.png" />
<img src="img/P1/jiantou.png" class="center jiantou" />
</section>
<section id='sec04' class="main none" style="background: blue;">
<img class="bg" src="img/4.png" />
<img src="img/P1/jiantou.png" class="center jiantou" />
</section>
<section id='sec05' class="main none" style="background: blue;">
<img class="bg" src="img/5.png" />
<img src="img/P1/jiantou.png" class="center jiantou" />
</section>
<section id='sec06' class="main none" style="background: blue;">
<img class="bg" src="img/6.png" />
<img src="img/P1/jiantou.png" class="center jiantou" />
</section>
<img id="main_bottom" src="img/top.png" />
</div>
<div id="onclick" class="none" style="top:0;">
<div>
</div>
</div>
</body>代码中每个section为一个页面，总共为6个页面，也就是说能够滑动6个页面。每个页面都有一个向下的箭头，来提示下滑。
再来看一下js代码
<script type="text/javascript">
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').length-1)) {
$('#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').length)) {
$('#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<$('#main .main').length-1)) {
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<$('#main .main').length)) {
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);
*/
</script>这里所设置的是滑动效果和箭头的效果，我就不在多说了，大家可以看一下演示效果，整体的文件本站提供下载，需要的朋友可以下载下来看看。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读