使用jQuery的touchSwipe插件监听触摸滑动事件，结合css3实现手机端场景滑动切换效果。最好在手机端测试代码，也可以在PC端用鼠标点击模拟滑动。
1、html代码：
<div class="container">
<div class="page page0 page_current">
<h1>你好，我是0号屏幕，第一屏,鼠标单击向下/向上拖动</h1>
</div>
<div class="page page1">
<h1>你好，我是1号屏幕，鼠标单击向下/向上拖动</h1>
</div>
<div class="page page2">
<h1>你好，我是2号屏幕，鼠标单击向下/向上拖动</h1>
</div>
<div class="page page3">
<h1>你好，我是3号屏幕，鼠标单击向下/向上拖动</h1>
</div>
<div class="page page4">
<h1>你好，我是4号屏幕，鼠标单击向下/向上拖动</h1>
</div>
<i class="fa fa-angle-double-up"></i>
</div>
注意:需引入jquery-1.11.1.min.js和jquery.touchSwipe.min.js文件
2、css代码
.container {
position: relative;
width: 100%;
height: 100%;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px; //透视容器的位置是相对的，增加1200像素透视它
text-align: center;
}
.container .page {
color: #fff;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.page_current{
visibility: visible!important;
z-index: 1;
}
.container .page h1 {
margin: 0;
padding: 0;
}
.fa-angle-double-up{
position: fixed;
bottom: 20px;
left: 49%;
color: #FFF;
font-size: 22px;
animation: blink_up 1.2s infinite;
-moz-animation: blink_up 1.2s infinite;
-webkit-animation: blink_up 1.2s infinite;
-o-animation: blink_up 1.2s infinite;
z-index: 2;
}
@keyframes blink_up {
0%, 30% {
opacity: 0;
transform: translate(0,10px);
}
60% {
opacity: 1;
transform: translate(0,0);
}
100% {
opacity: 0;
transform: translate(0,-8px);
}
}
/*翻页效果*/
.pt-page-moveToTop { -webkit-animation: moveToTop .6s ease both; -moz-animation: moveToTop .6s ease both; animation: moveToTop .6s ease both; z-index: 1!important;}
.pt-page-moveFromTop { -webkit-animation: moveFromTop .6s ease both; -moz-animation: moveFromTop .6s ease both; animation: moveFromTop .6s ease both; z-index: 2!important;}
.pt-page-moveToBottom { -webkit-animation: moveToBottom .6s ease both; -moz-animation: moveToBottom .6s ease both; animation: moveToBottom .6s ease both; z-index: 1!important;}
.pt-page-moveFromBottom { -webkit-animation: moveFromBottom .6s ease both; -moz-animation: moveFromBottom .6s ease both; animation: moveFromBottom .6s ease both; z-index: 2!important;}
@-webkit-keyframes moveFromTop { from { -webkit-transform: translateY(-100%); }}@-moz-keyframes moveFromTop { from { -moz-transform: translateY(-100%); }}@keyframes moveFromTop { from { transform: translateY(-100%); }}
@-webkit-keyframes moveFromBottom { from { -webkit-transform: translateY(100%); }}@-moz-keyframes moveFromBottom { from { -moz-transform: translateY(100%); }}@keyframes moveFromBottom { from { transform: translateY(100%); }}
@-webkit-keyframes moveToTop { to { -webkit-transform: translateY(-20%) scale(0.8); }}@-moz-keyframes moveToTop { to { -moz-transform: translateY(-20%) scale(0.8); }}@keyframes moveToTop { to { transform: translateY(-20%) scale(0.8); }}
@-webkit-keyframes moveToBottom { to { -webkit-transform: translateY(20%) scale(0.8); }}@-moz-keyframes moveToBottom { to { -moz-transform: translateY(20%) scale(0.8); }}@keyframes moveToBottom { to { transform: translateY(20%) scale(0.8); }}
/*翻页效果*/
注意：手机端css代码兼容问题：需在css样式前添加前缀以兼容不同浏览器
示例代码:
.fa-angle-double-up{
position: fixed;
bottom: 20px;
left: 49%;
color: #FFF;
font-size: 22px;
animation: blink_up 1.2s infinite;
-moz-animation: blink_up 1.2s infinite;
-webkit-animation: blink_up 1.2s infinite;
-o-animation: blink_up 1.2s infinite;
z-index: 2;
}
@keyframes blink_up {
0%, 30% {
opacity: 0;
transform: translate(0,10px);
}
60% {
opacity: 1;
transform: translate(0,0);
}
100% {
opacity: 0;
transform: translate(0,-8px);
}
}
@-moz-keyframes blink_up {
0%, 30% {
-moz-opacity: 0;
-moz-transform: translate(0,10px);
}
60% {
-moz-opacity: 1;
-moz-transform: translate(0,0);
}
100% {
-moz-opacity: 0;
-moz-transform: translate(0,-8px);
}
}
@-webkit-keyframes blink_up {
0%, 30% {
-webkit-opacity: 0;
-webkit-transform: translate(0,10px);
}
60% {
-webkit-opacity: 1;
-webkit-transform: translate(0,0);
}
100% {
-webkit-opacity: 0;
-webkit-transform: translate(0,-8px);
}
}
@-o-keyframes blink_up {
0%, 30% {
-o-opacity: 0;
-o-transform: translate(0,10px);
}
60% {
-o-opacity: 1;
-o-transform: translate(0,0);
}
100% {
-o-opacity: 0;
-o-transform: translate(0,-8px);
}
}
3、js代码
$(document).ready(function() {
var nowpage = 0;
//给最大的盒子增加事件监听
$(".container").swipe({
swipe:function(event, direction, distance, duration, fingerCount) {
if (direction == "up") { //向上滑动页面
nowpage = nowpage + 1;
$(".page").eq((nowpage-1)%5).addClass("pt-page-moveToTop"); //当前显示页面向上滑动移出视窗
$(".page").eq((nowpage%5)).addClass("page_current pt-page-moveFromBottom"); //下个页面显示并向上滑动至视窗
$(".container").swipe(‘disable‘); //页面处于滑动动画时禁止swipe插件
setTimeout(function(){
$(".page").eq((nowpage-1)%5).removeClass("page_current pt-page-moveToTop"); //移除滑动动画效果
$(".page").eq((nowpage%5)).removeClass("pt-page-moveFromBottom"); //移除滑动动画效果
$(".container").swipe(‘enable‘); //页面滑动动画结束时重新启用swipe插件
},600);
} else if (direction == "down") { //向下滑动页面
if(nowpage==0){ //当前页面为第一个页面时
nowpage = nowpage +4;
console.log("a");
}else{
nowpage = nowpage -1;
}
$(".page").eq((nowpage+1)%5).addClass("pt-page-moveToBottom"); //当前显示页面向下滑动移出视窗
$(".page").eq((nowpage%5)).addClass("page_current pt-page-moveFromTop"); //下个页面显示并向下滑动至视窗
$(".container").swipe(‘disable‘);
console.log(nowpage%5);
console.log((nowpage+1)%5);
console.log(nowpage);
setTimeout(function(){
$(".page").eq((nowpage+1)%5).removeClass("page_current pt-page-moveToBottom");
$(".page").eq((nowpage%5)).removeClass("pt-page-moveFromTop");
$(".container").swipe(‘enable‘);
},600);
}
}
});
});
通过使用jquery的touchSwipe插件给class名称为container的div元素添加滑动事件监听,并根据滑动事件的方向切换场景。
时间： 2024-10-07 08:30:38