首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于swiper的手机端上下和左右滑动效果

基于swiper的手机端上下和左右滑动效果

作者头像
OECOM
发布2020-07-01 17:55:40
3.1K0
发布2020-07-01 17:55:40
举报
文章被收录于专栏:OECOMOECOM

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样式的修饰我没有贴出来,有兴趣的朋友可以下载下来看看,并且本站提供效果演示,大家可以看看。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-04-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档