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 --;
}
});
}
时间： 2024-08-04 21:23:51