今天我们来说下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菜单的更多相关文章

  1. Hammer.js移动端触屏框架的使用

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  2. js移动端触屏事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  3. 原生js实现网页触屏滑动

    前言: 我有一个html格式的2048游戏,可以用键盘上下左右操作,但是放到手机上就抓瞎了.于是想修改一下代码,将键盘事件改成手机触屏事件. html5 的touch事件 html5支持touch事件 ...

  4. JS——2048(支持触屏及键盘操作)

    <html> <head> <title>2048</title> <style type="text/css"> ta ...

  5. html+js实现的触屏版贪吃蛇

    查看线上demo(服务器经常断开,推荐下载源码本地打开): http://47.93.103.19:8044/client/ ; 使用手机打开或者chrome浏览器的手机模式打开 源码地址 :http ...

  6. 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener

    使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...

  7. Hammer.js——给bootstrap添加触屏功能

    Hammer.js qq群号(html5技术交流):158677025   手机端演示二维码(或直接在手机中输入网址:http://lilinfeng.cncoder.me 浏览效果): 一.前言 移 ...

  8. TouchSlide触屏滑动特效插件的使用

    官方连接:http://www.superslide2.com/TouchSlide/ TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端, 能实现触屏 ...

  9. TouchSlide 触屏滑动特效插件

    TouchSlide 是纯javascript打造的触屏滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 插件开源.体积小.简单实用.功能强大,是 ...

随机推荐

  1. ERROR CL .exe……错误

    这个错误遇见了两次,一次是在装VC时,解决办法见 这个 还有一次是VS2012时,遇见了: error MSB6006: “CL.exe”已退出,代码为 -1073741515. 解决办法:Add t ...

  2. centos 安装FTP server详情(转)

    centos 安装FTP server详情 分类: linux 2013-12-27 16:45 227人阅读 评论(0) 收藏 举报 我们这里以安装vsftpd 服务器端为例子: 1.进入到cent ...

  3. 3D动画效果照片墙demo

        <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF- ...

  4. ecos的mvcl

    m 数据模型抽象层 v 视图 c 控制器 l 业务逻辑 mvc与mvcl区别 mvc中的m是mvcl中m+l

  5. Smali文件语法解析

    大家都应该知道APK文件其实就是一个MIME为ZIP的压缩包,我们修改ZIP后缀名方式可以看到内部的文件结构,例如修改后缀后用RAR打开鳄鱼小顽皮APK能看到的是(Google Play下载的完整版版 ...

  6. ibatis参数传递小技巧 - 疯狂的菠菜 - ITeye技术网站

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. jquery中如何以逗号分割字符串_百度知道

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  8. 数据分析与R语言-概念点(一)

    一.数据分析 1.数据分析的多层模型 常用的统计量 常用的算法 常用的数据分析工具 常见的报表 二.R语言 1.什么是R语言?     R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个 ...

  9. POJ3723最小生成树

    题意:从一个起点出发连接男孩子和女孩子,若是两者之间有连接的,则花费为10000-d,若是没有连接的则花费为10000 分析:很显然是一个最小生成树,但是我们希望的是d越大越好,因为d越大,10000 ...

  10. bitmap格式分析(转)

    源:bitmap格式分析 参考:bitmap图像介绍 最近正在着手开发一个图片库,也就是实现对常见图片格式的度写操作.作为总结与积累,我会把这些图片格式以及加载的实现写在我的Blog上. 说到图片,位 ...