基于touchSwipe微信手机端微场景HTML5页面特效(适用于PC端)

这是适用于一个PC(电脑)端和手机端的下拉滑动切换网页的效果实现。

相关文章推荐: 基于Zepto的微信手机端微场景HTML5页面特效

代码

主要HTML代码

<div id="main" class="main">

    <img id="main_top" src="img/top.png" />

    <section id='sec01' class="main" style="top:0%;background: red; ">
    </section>

    <section id='sec02' class="main" style="background: yellow;">
    </section>

    <section id='sec03' class="main" style="background: blue;">
    </section>
    <img id="main_bottom" src="img/top.png" />
</div>

 JS代码

1、动画不重复版

即动画过去,再滑动到该页面动画不显示。

动画不重复版

		<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();
				}, 1000);
				//car_sec01
				setTimeout(function(){
				$("#car_01").show();
				TweenLite.from($("#car_01"), 1, {x:"100",y:"10",scale:0.5,ease:Back.easeOut});
				TweenLite.to($("#car_01"), 1, {x:"10",y:"20",scale:1.0});
				},200);

			});


			/**
			 * 滑动锁 	true为解锁状态可以滑动
			 * 		false为锁定状态不能滑动
			 */
			init.swipeLock = true;
			/*非必须
                        init.url = '与服务器数据交互的地址';
			init.openid = '';
                          */
			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');
						} 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');
						} 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'){
						//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(){
									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(){
									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>

 2、动画重复之简单版

这个是不需要在单页面对某一元素单独使用timeout延迟时的。

动画重复之简单版

<script type="text/javascript">

			var init = new Object();

			$(window).load(function() {
				$('#loading').fadeOut();
				setTimeout(function() {
					$('#main').fadeIn();
				}, 6000);
			});


			/**
			 * 滑动锁 	true为解锁状态可以滑动
			 * 		false为锁定状态不能滑动
			 */
			init.swipeLock = true;
			/*非必须
            init.url = '与服务器数据交互的地址';
			init.openid = '';
                          */
			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{
								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>

 2、动画重复之复杂版

这个是可以对单页面元素进行各种自定义的

动画重复之复杂版

<script type="text/javascript">

			var init = new Object();

			$(window).load(function() {
				$('#loading').fadeOut();
				setTimeout(function() {
					$('#main').fadeIn();
				}, 6000);
			});

			/**
			 * 滑动锁 	true为解锁状态可以滑动
			 * 		false为锁定状态不能滑动
			 */
			init.swipeLock = true;
			/*非必须
            init.url = '与服务器数据交互的地址';
			init.openid = '';
            */
			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(){
			}
			init.sec01 = function(){
				$('#sec01_jiantou').hide();
				clearTimeout(init.sec01jTimeout);
				init.sec01jTimeout = setTimeout(function(){
					$('#sec01_jiantou').show();
				},6000);
			}
			init.sec02 = function(){
				$('#sec02_jiantou').hide();
				clearTimeout(init.sec02jTimeout);
				init.sec02jTimeout = setTimeout(function(){
					$('#sec02_jiantou').show();
				},6000);
			}
			init.sec03 = function(){
				$('#sec03_jiantou').hide();
				clearTimeout(init.sec03jTimeout);
				init.sec03jTimeout = setTimeout(function(){
					$('#sec03_jiantou').show();
				},5000);
			}
			init.sec04 = function(){
				$('#sec04_jiantou').hide();
				clearTimeout(init.sec04jTimeout);
				init.sec04jTimeout = setTimeout(function(){
					$('#sec04_jiantou').show();
				},4500);
			}
			init.sec05 = function(){
				$('#sec05_jiantou').hide();
				clearTimeout(init.sec05jTimeout);
				init.sec05jTimeout = setTimeout(function(){
					$('#sec05_jiantou').show();
				},4500);
			}
			init.sec06 = function(){
				$('#sec06_fengyu').hide();
				$('#sec06_jiantou').hide();
				clearTimeout(init.sec06Timeout);
				init.sec06Timeout = setTimeout(function(){
					$('#sec06_fengyu').show();
				},3000);
				clearTimeout(init.sec06jTimeout);
				init.sec06jTimeout = setTimeout(function(){
					$('#sec06_jiantou').show();
				},4000);
			}
			init.sec07 = function(){
			    $('#sec07_jia').hide();
			    $('#sec07_jiantou').hide();
				clearTimeout(init.sec07Timeout);
				init.sec07Timeout = setTimeout(function(){
				$("#sec07_jia").show();
				TweenLite.from($("#sec07_jia"), 1, {scale:2.0, opacity:2.3});
				TweenLite.to($("#sec07_jia"), 1, {scale:1.0, opacity:1.0});
				},1000);
				clearTimeout(init.sec07jTimeout);
				init.sec07jTimeout = setTimeout(function(){
					$('#sec07_jiantou').show();
				},6000);
			}
			init.sec08 = function(){
				$('#sec08_baorong').hide();
				$('#sec08_guangkuo').hide();
				$('#sec08_renxing').hide();
				$('#sec08_zhuizhu').hide();
				$('#sec08_yanxu').hide();
				$('#sec08_jiating').hide();
				$('#sec08_jiantou').hide();

				/*
				*进入
				*/
				clearTimeout(init.sec08_baorongInTimeout);
				init.sec08_baorongInTimeout = setTimeout(function(){
					$('#sec08_bao').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
					$('#sec08_rongShang').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec08_rongXia').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
					$('#sec08_baorong').show();
					$('#sec08_bao').show();
					$('#sec08_rongXia').show();
				},1000);
				clearTimeout(init.sec08_zhuizhuInTimeout);
				init.sec08_zhuizhuInTimeout = setTimeout(function(){
					$('#sec08_guangkuo').hide();
					$('#sec08_zhuizhu').show();

					$('#sec08_bao').hide();
					$('#sec08_rongXia').hide();
					$('#sec08_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"0.2"});
					$('#sec08_zhui').css({"top": "10%","left": "6%","width":"initial","margin":"0 auto"});
					$('#sec08_zhuzuo').css({"top": "45%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec08_zhuyou').css({"top": "47%","left":" 15%","width":"initial","margin":"0 auto"});
					$('#sec08_zhui').show();
					$('#sec08_zhuzuo').show();
					$('#sec08_zhuyou').show();
				},3000);

				clearTimeout(init.sec08_guangkuoInTimeout);
				init.sec08_guangkuoInTimeout = setTimeout(function(){
					$('#sec08_guangkuo').show();
					$('#sec08_zhui').hide();
					$('#sec08_zhuzuo').hide();
					$('#sec08_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"0.2"});
					var sec08_guangall={top:"10%",left:"32.5%",width:"initial"};
					$('#sec08_guang').css(sec08_guangall);
					$('#sec08_guangkuang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec08_kuo').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
					$('#sec08_guang').show();
					$('#sec08_guangkuang').show();
					$('#sec08_kuo').show();
				},5000);
				clearTimeout(init.sec08_yanxuInTimeout);
				init.sec08_yanxuInTimeout = setTimeout(function(){
					$('#sec08_yanxu').show();
					$('#sec08_guangkuang').hide();
					$('#sec08_kuo').hide();
					$('#sec08_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"0.2"});
					$('#sec08_yanzuo').css({"top": "16.5%","left": "7%","width":"initial","margin":"0 auto"});
					$('#sec08_yanyou').css({"top": "10%","left":"6%","width":"19.5%","width":"initial","margin":"0 auto"});
					$('#sec08_xu').css({"top": "45%","left":" 6%","width":" 19.5%","width":"initial","margin":"0 auto"});
					$('#sec08_yanzuo').show();
					$('#sec08_yanyou').show();
					$('#sec08_xu').show();
				},7000);
				clearTimeout(init.sec08_renxingInTimeout);
				init.sec08_renxingInTimeout = setTimeout(function(){
					$('#sec08_renxing').show();
					$('#sec08_yanyou').hide();
					$('#sec08_xu').hide();
					$('#sec08_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"0.2"});

					$('#sec08_renyou').css({"top": "14%","left": "22。5%","width":"initial","margin":"0 auto"});
					$('#sec08_renzuo').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto"});
					$('#sec08_xing').css({"top": "45%","left":" 6%","width":"initial","margin":"0 auto"});
					$('#sec08_renzuo').show();
					$('#sec08_renyou').show();
					$('#sec08_xing').show();
				},9000);
				/*	*/

				clearTimeout(init.sec08_chongzuTimeout);
				init.sec08_chongzuTimeout = setTimeout(function(){
					$('#sec08_renzuo').hide();
					$('#sec08_xing').hide();
					$('#sec08_rongShang').css({"top": "10%","left":"6%","width":"initial","margin":"0 auto","opacity":"1"});
					$('#sec08_zhuyou').css({"top": "17%","left":" 4%","width":"initial","margin":"0 auto","opacity":"1"});
					$('#sec08_guang').css({"top": "48%","left":"32.5%","width":"28%","opacity":"1"});
					$('#sec08_yanzuo').css({"top": "56.5%","left": "7%","width":"27%","margin":"0 auto","opacity":"1"});
					$('#sec08_renyou').css({"top": "55%","left": "16%","width":"14%","margin":"0 auto","opacity":"1"});
					$('#sec08_jiating').show();
					$('#sec08_jiantou').show();
				},10000);
			}
			init.sec09 = function(){
				$('#sec09_car').show();
				$('#sec09_cars').show();
				$('#sec09_map').hide();
				$('#sec09_zhanwei').hide();
				$("#sec09_car").click(function() {
				 	$('#sec09_cars').hide();
					clearTimeout(init.sec09_carTimeout);
					init.sec09_carTimeout = setTimeout(function(){
					$('#sec09_car').hide();
					$('#sec09_map').show();
					$('#sec09_zhanwei').show();
					},1);
				});
				$("#sec09_cars").click(function() {
				 	$('#sec09_cars').hide();
					clearTimeout(init.sec09_carsTimeout);
					init.sec09_carsTimeout = setTimeout(function(){
					$('#sec09_car').hide();
					$('#sec09_map').show();
					$('#sec09_zhanwei').show();
					},1);
				});
			}
			$("#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;
							if (init.thisId == 0) {
									init.sec02();
								}
								if (init.thisId == 1) {
									init.sec03();
								}
								if (init.thisId == 2) {
									init.sec04();
								}
								if (init.thisId == 3) {
									init.sec05();
								}
								if (init.thisId == 4) {
									init.sec06();
								}
								if (init.thisId == 5) {
									init.sec07();
								}
								if (init.thisId == 6) {
									init.sec08();
								}
								if (init.thisId == 7) {
									init.sec09();
								}


								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;

								if (init.thisId == 1) {
									init.sec01();
								}
								if (init.thisId == 2) {
									init.sec02();
								}
								if (init.thisId == 3) {
									init.sec03();
								}
								if (init.thisId == 4) {
									init.sec04();
								}
								if (init.thisId == 5) {
									init.sec05();
								}
								if (init.thisId == 6) {
									init.sec06();
								}
								if (init.thisId == 7) {
									init.sec07();
								}
								if (init.thisId == 8) {
									init.sec08();
								}
								if (init.thisId == 9) {
									init.sec09();
								}

								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动画效果基础代码

//0秒就开始,持续12.6秒完成,1是只出现一次
-webkit-animation: FadeIn 12.6s ease 0.0s 1 forwards;
//持续循环,每次循环时间为1.2秒
-webkit-animation: FadeInB ease-in-out 1.2s infinite;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native之react-native-scrollable-tab-view详解

在React Native开发中,官方为我们提供的Tab控制器有两种:TabBarIOS和ViewPagerAndroid。TabBarIOS,仅适用于IOS平...

99260
来自专栏前端知识分享

第145天:jQuery.touchSlider触屏满屏左右滚动幻灯片

28420
来自专栏青玉伏案

ReactNative之参照具体示例来看RN中的FlexBox布局

今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客。上篇博客《ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State...

13820
来自专栏糊一笑

移动端效果之IndexList

写在前面 接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理。效果如下: ? 代码请看这里:github 移动端效果之swiper 移动端效果之...

24540
来自专栏小蠢驴iOS专题

MBProgressHUD && SVProgressHUD 在实际开发中运用

44060
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习之UIKit绘制

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技...

14320
来自专栏HTML5学堂

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

73570
来自专栏前端说吧

JS-制作可伸缩的水平菜单栏

51240
来自专栏HTML5学堂

jQuery特效 | 导航底部横线跟随鼠标缓动

HTML5学堂(码匠):jQuery来实现如下特效 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项底部。 2月初,接收到了公众号读者的效果需求,希望能够...

47350
来自专栏HTML5学堂

JavaScript 获取鼠标及元素在页面上的位置

HTML5学堂:JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活的获取鼠标的位置信息,能够便于我们实现各种复杂的页面交互效果,到底还...

40860

扫码关注云+社区

领取腾讯云代金券