Zepto手机触屏翻屏

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

Zepto手机触屏翻屏的相关文章

Mobiscroll手机触屏日期选择器

   最近在制作jquery mobile因要用到日历控件,突然发现Mobiscroll非常不错.于是摘下来记录. A Mobiscroll是一个用于触摸设备(Android phones.iPhone. iPad.Galaxy Tab)的日期和时间选择器jQuery插件.可以让用户很方便的只需要滑动数字就可以选择日期.Mobiscroll作为一款jQuery日期插件可以让用户自定义主题,完全通过CSS文件修改样式,经过测试可以完美使用在iOS4.Android 2.2. Android 2.3

js手机触屏轮播效果

以前自己用纯js写的,找了N就都没找到,还是从同事哪里重新拿过来的,仅是备忘,看过新浪新闻的手机触屏端后,自己写了个效果,比新浪的省代码多了 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Cache-Control&

手机触屏滑动插件idangerous.swiper.js

手机触屏滑动插件 idangerous.swiper.js 演示地址:http://www.idangero.us/sliders/swiper/demos.php 下载地址:https://github.com/nolimits4web/Swiper

jQuery手机触屏左右滑动切换栏目和焦点图

实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide,大家可以百度下. 首先来看看左右滑动切换焦点图: JQuery代码 $(function(){ TouchSlide({ slideCell:"#slideBox", titCell:".myhd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层 mainCell:".bd ul", effect:"leftLoop

oracle清屏翻页配置

在oracle数据库刚安装好时,输入命令时不能跟mysql数据库一样,清楚屏幕上执行过的命令和翻页重复执行上次执行过的命令,输错命令是也不能移动光标进行修改,那么这在工作中是很不方便的.那这篇文档就是安装工具,使oracle能够支持清屏翻页及自由移动光标. 首先下载三个源码包 1)IO-Tty-1.07.tar.gz 2)Term-ReadLine-Gnu-1.16.tar.gz 3)uniread-1.01.tar.gz 2.安装 1)解压缩至本地 [[email protected] Des

android手机横屏和竖屏与android:configChanges

原文地址:http://woshixy.blog.51cto.com/5637578/1081913 目前大多数手机都支持重力感应随之而来的就是屏幕方向改变的问题.对应普通开发者来说屏幕的随意改变也会带来困扰.在Google自带的doc里可以看到,如果设备的配置(Resources.Configuration中进行了定义)发生改变,那么所有用户界面上的东西都需要进行更新以适应新的配置.因为Activity是与用户交互的最主要的机制,它包含了处理配置改变的专门支持.除非你特殊指定,否则当配置发生改

实用总结,如何截取翻屏网页

在有限的条件下,除了实用PrScrn快捷键 然后在图片编辑软件中贴图外,可以直接使用Firefox工具Page saver 直接在Firefox中搜索Page saver按照提示安装并重启FF,安装完后再工具栏右侧找到 实用总结,如何截取翻屏网页

vi命令-翻屏

1.翻屏 命令:Ctrl+f 描述:向下翻一屏 命令:Ctrl+b 描述:向上翻一屏 命令:Ctrl+d 描述:向下翻半屏 命令:Ctrl+u 描述:向上翻半屏

一步使你的asp.net网站在手机浏览器上全屏显示

一步使你的asp.net网站在手机浏览器上全屏显示 1.问题 公司的asp.net网页在手机浏览器上初始化时显示的是缩放的页面,用户必须手动放大才能看清页面的字体,这样体验不好 2.解决 前段时间学习JQuery mobile 看到所有的demo页面都能全屏显示在手机上,页面上面都有这样一段代码: ? 1 <meta name="viewport" content="width=device-width, initial-scale=1"> 参数说明: