zepto.js swipe实现触屏tab菜单
今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功能。前几天,有朋友告诉我百度基于zepto.js做了一个webapp的UI,大家也可以看下:“http://gmu.baidu.com/”,有点像jquery ui的东西,大家有兴趣可以学习啊。。。
我们今天,用zepto.js的swipe来实现新浪手机网的tab菜单,大家可以先看下新浪的手机版“http://sina.cn/”。
我们可以看到,新浪导航那里,并不是百分比,而是写好宽度,这样,它可以根据需要添加个数,而我一开始就将代码分成四个,因此,我们的tab个数就按百分比,分成四个显示了。。。
这里,我加上了zepto.js的tap功能,主要是在我在IPAD上用click,结果发现民间幕会闪,好晕。。。
看到swipeLeft这个,你会不会想到之前的touchSwipe的写法,有兴趣的可以看看这文章:“touchSwipe实现3G凤凰网手机触屏Tab菜单”。不过,touchSwipe里就没有tap这个函数了。。。
那么,这里提一下,我们这个zepto.js是修改过的,原来的版本,在IPAD及手机上滑动时,页面会滚动,我在源文件里的touchmove写上e,preventDefault(),结果连滚动条都动不了,头晕啊。。。
在zepto.js里,我们也可以知道swipe这个功能实现的原理:
我们可以看到,是通过两个点之间触屏的距离来判断是向左还是右或是向上向下swipe。。。
以上是我制作的效果截图:
以下我提供源文件,欢迎有需要的朋友下载使用:
预览地址:http://www.163css.net/net163/cssjs/2013/01/zeptotab/index.html
下载地址:zepto.js swipe实现触屏tab菜单.rar
zepto.js swipe实现触屏tab菜单的更多相关文章
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- js移动端触屏事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- 原生js实现网页触屏滑动
前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...
- JS——2048(支持触屏及键盘操作)
<html> <head> <title>2048</title> <style type="text/css"> ta ...
- html+js实现的触屏版贪吃蛇
查看线上demo(服务器经常断开,推荐下载源码本地打开): http://47.93.103.19:8044/client/ ; 使用手机打开或者chrome浏览器的手机模式打开 源码地址 :http ...
- 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener
使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...
- Hammer.js——给bootstrap添加触屏功能
Hammer.js qq群号(html5技术交流):158677025 手机端演示二维码(或直接在手机中输入网址:http://lilinfeng.cncoder.me 浏览效果): 一.前言 移 ...
- TouchSlide触屏滑动特效插件的使用
官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...
- TouchSlide 触屏滑动特效插件
TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是 ...
随机推荐
- RTC-高效率实现TimerTicker编解码
源:RTC-高效率实现TimerTicker编解码 嵌入式系统中时间是很重要的,在以往的系统中设计者常常使用一种叫RTC的专用芯片来维持时间,这种芯片种类很多接口形式也很多,如常用的DS1302.PC ...
- java数据类型,hibernate数据类型,标准sql数据类型之间的对应表
Hibernate API简介 其接口分为以下几类: l 提供访问数据库的操作的接口: l 用于配置Hibernate的接口: l 回调接口 l ...
- [转]httpclient 上传文件、下载文件
用httpclient4.3 post方式推送文件到服务端 准备:httpclient-4.3.3.jar:httpcore-4.3.2.jar:httpmime-4.3.3.jar/** * 上传 ...
- 解决BT5不能使用putty连接问题
root@bt:~# cd /etc/sshroot@bt:/etc/ssh# sshd-generate Generating public/private rsa1 key pair.Your i ...
- sql server 行转列 Pivot UnPivot
SQL Server中行列转换 Pivot UnPivot 本文转自:张志涛 原文地址: http://www.cnblogs.com/zhangzt/archive/2010/07/29/17878 ...
- ASCII,Unicode 和通用方式
ASCII码 字符char,字符指针char*,字符数组char a[]; 例如:char a='A'; char* pC="beijing"; char aC[]="b ...
- 转 Android HttpClient post MultipartEntity - Android 上传文件
转自 http://blog.csdn.net/hellohaifei/article/details/9707089 在Android 中使用HttpClient,MultipartEntity ...
- Java谜题心得
1,二进制浮点数的运算是对实际算数的一种近似运算. 2,IEEE 754浮点算术保留了一个特殊的值用来表示一个不是数字的数量[IEEE 754].这个值就是NaN(“不是一个数字(Not a Numb ...
- java如何计算程序运行时间
long startTime = System.currentTimeMillis(); //获取开始时间 doSomething(); //测试的代码段 long endTime = S ...
- springMVC源码下载地址
https://github.com/spring-projects/spring-framework/tags可以选择需要的版本进行下载.