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-10-12 23:22:17