基于touchSwipe微信手机端微场景HTML5页面特效（适用于PC端）
基于touchSwipe微信手机端微场景HTML5页面特效（适用于PC端）
WindCoder
发布于 2018-09-20 14:34:57
发布于 2018-09-20 14:34:57
这是适用于一个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;本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录