2015-04-22 11:26:32
上一篇文章中我向大家介绍了基于swiper的手机端上下和左右滑动效果,但有时候在上下滑动的中间需要有左右滑动的效果,那么我就再来给大家介绍一种基于swiper的手机端上下滑动的同时还能够左右滑动效果,来看一下代码。
<body onLoad="init.body()">
<div id="main" class="main">
<img id="main_top" src="img/top.png"/>
<section id='sec01' class="main" style="top:0%;">
<img src="img/1.png" class="bg"/>
</section>
<section id='sec02' class="main" style="display:none;">
<img src="img/2.png" class="bg"/>
<img src="img/left.png" id = "left_img" class="center1" style="top: 53%;"/>
<img src="img/right.png" class="center2" style="top: 53%; -webkit-animation: BounceInL ease-in-out 1.2s infinite;"/>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<img src="img/weixin.jpg" style="top: 38%; padding-top:27%;"/>
</div>
<div class="swiper-slide" >
<img src="img/weixin.jpg" style="top: 38%; padding-top:27%;"/>
</div>
<div class="swiper-slide" >
<img src="img/weixin.jpg" style="top: 38%; padding-top:27%;"/>
</div>
<div class="swiper-slide" >
<img src="img/weixin.jpg" style="top: 38%; padding-top:27%;"/>
</div>
</div>
</div>
<script src="js/idangerous.swiper-2.1.min.js"></script>
</section>
<script>
var mySwiper2 = new Swiper('.swiper-container2',{
paginationClickable: true
})
var mySwiper = new Swiper('.swiper-container',{
paginationClickable: true
})
</script>
<section id='sec03' class="main" style="display:none;">
<img src="img/3.png" class="bg"/>
</section>
<img src="img/jiantou.png" class="center" style="top: 97%; -webkit-animation: FadeInT ease-in-out 1.2s infinite;" />
这一部分为body部分代码,每个section为一个不同的页面,通过上下滑动来切换页面,在第二个sectoion中设置了左右滑动的功能,每一个div为一个页面,可以左右滑动,这里有一个不足之处就是左右箭头,当处于需要左右的第一个页面时左箭头不动,右箭头动。当进入第二个页面后应该两个都动,到最后一个页面时左箭头动右箭头不动。有兴趣的朋友可以尝试着修改一下达到这个效果。
在来看一下js处代码,这部分代码与上一篇文章的js代码大致相同,还是贴出来让大家看看吧。
<script type="text/javascript">
var init = new Object();
init.thisId = 0;
/**
*跳转隐藏
*/
$("#onclick").hide();
/**
* 滑动锁 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(){
}
//swipe 的dome
$("#main").swipe({
swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {
$('#sec011').html(distance);
if(fingerCount>1)return;
if(distance<=75)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(direction=='up'){
init.swipeLock = false;
if ((init.thisId>=0) && (init.thisId<$('#main .main').length-1)) {
try{
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>
还有一些css样式的修饰我没有贴出来,有兴趣的朋友可以下载下来看看,并且本站提供效果演示,大家可以看看。