Zepto手机触屏翻屏

转载于 2021-01-08 15:04:12 发布 · 103 阅读

·

0

·

CC 4.0 BY-SA版权

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

javasript 专栏收录该内容

4 篇文章

订阅专栏

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

38

39

<!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:

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

38

39

40

41

42

43

44

$.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 --;

}

});

}

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

添加红包

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。