Zepto手机触屏翻屏

0000000xj

于 2021-01-08 15:04:12 发布

阅读量63

点赞数

分类专栏： javasript

原文链接：https://www.cnblogs.com/mbyund/p/5485371.html

版权

javasript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

demo:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<title>Zepto手机触屏翻屏</title>

<script type="text/javascript" src="http://s0.ifengimg.com/static/js/zepto.min.js"></script>

<style>

*{padding:0; margin:0;}

.screen-1{background:#F00;}

.screen-2{background:#0F0;}

.screen-3{background:#00F;}

.screen-4{background:#FF0;}

.screen-5{background:#0FF;}

.screen-6{background:#F0F;}

</style>

</head>

<body>

<div class="screen screen-1">1</div>

<div class="screen screen-2">2</div>

<div class="screen screen-3">3</div>

<div class="screen screen-4">4</div>

<div class="screen screen-5">5</div>

<div class="screen screen-6">6</div>

<script type="text/javascript" src="pageSlider.js"></script>

<script>

Zepto(function($){

var b = $(".screen").pageSlider();

$(".screen").eq(1).on("enter",function(){//进场事件

console.log(11111111);

});

$(".screen").eq(1).on("leave",function(){//出场事件

console.log(22222222);

});

})

</script>

</body>

</html>

JS:

$.fn.pageSlider = function(){

var _this = this;

var _len = _this.length;

var currentIndex = 0;

_this.each(function(idx,ele){

var zIndex = (_len - idx) * 10;

$(ele).css({

width: "100%",

height: "100%",

position: "absolute",

zIndex: zIndex,

"transition-duration":"700ms",

"-webkit-transition-duration":"700ms",

"-webkit-animation-timing-function":"ease-in-out"

});

_this.on("swipeUp", function(){//next

if(currentIndex < _len - 1){

_this.eq(currentIndex).css({

"-webkit-transform":"translateY(-100%)",

"transform":"translateY(-100%)"

});

_this.eq(currentIndex).trigger("leave");

_this.eq(currentIndex+1).css({

"-webkit-transform":"translateY(0)",

"transform":"translateY(0)"

});

_this.eq(currentIndex+1).trigger("enter");

currentIndex ++;

}

});

_this.on("swipeDown", function(){//prev

if(currentIndex > 0){

_this.eq(currentIndex-1).css({

"-webkit-transform":"translateY(0)",

"transform":"translateY(0)"

});

_this.eq(currentIndex-1).trigger("enter");

_this.eq(currentIndex).trigger("leave");

currentIndex --;

}

});

}

0000000xj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Zepto手机触屏翻屏

demo: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
复制链接

扫一扫

专栏目录