今天我们来说下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. 关闭和释放JDBC

    今天在项目中看到一段代码, Connection conn = null;  ResultSet rs = null;  PreparedStatement pss = null;  try  {  ...

  2. C语言实现按位循环左移和循环右移

    ror eax,cl ==> eax=(eax>>cl)+(eax<<(sizeof(eax)-cl)); rol eax,cl ==> eax=(eax<& ...

  3. u-boot添加一个hello命令

    1.在common目录下建立一个cmd_hello.c文件 2.仿照/common/cmd_bootm.c文件修改,把cmd_bootm.c头文件复制过来 3.再复制do_bootm.U_BOOT_C ...

  4. Eclipse中常用的操作单词

    Existing Project into Workspace 现有的工程引入工作空间(加载工程)File 文件New 新建Project 工程Folder 文件夹Import 引入(加载&导 ...

  5. PAT (Advanced Level) 1069. The Black Hole of Numbers (20)

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  6. base库插件---拖动

    /** * Created by Administrator on 2014/6/5 0005. Base-drag 基于Base库的拖拽插件 tags为你要拖拽的元素参数, 数组形式传入 */ $( ...

  7. android usb挂载分析

    http://blog.csdn.net/new_abc/article/details/7409018

  8. rm link

    # this works rm foo # versus rm foo/

  9. AMQP协议学习

    参考这个:http://kb.cnblogs.com/page/73759/ 写的挺好 AMQP协议是一种二进制协议,提供客户端应用与消息中间件之间异步.安全.高效地交互.从整体来看,AMQP协议可划 ...

  10. A tutorial that will show you how to build an instant messaging app with Sinch.

    http://stackoverflow.com/questions/26247986/unsatisfiedlinkerror-couldnt-load-sinch-android-rtc-from ...