前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库. 为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端的浏览器是无用或者低效的. 而 Zepto 只针对移动端浏览器编写,因此体积更小.效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习成本也很低. 但是在开发过程中,我发现 Zepto 还远未成熟,其中包含了一些或大或小的“坑”,与 jQuery 的差距还是很明显的,

说到诡异事件发生的原因,自然是想到两者之间的差异性. 首先是效果: jquery中有fadeIn和fadeOut两个效果,用来实现渐隐渐显的效果,这个在PC端自然是常用的效果.然后我们前端组的组员Mr Huang自然是想到手机页面也可以更加炫丽,于是加上了登录框的渐隐效果.给用户缓冲的效果不错. 但是,zepto中并没有fadeIn和fadeOut,怎么办?难道真的就无法满足Mr Huang的愿望了吗?No. I will do it.在zepto中有个动画效果(animate),用这个效果来实

移动端使用的框架是zepto,但是zepto的内置对象没有传统的animate这个方法,效果都是需要css3来实现的,zepto也不支持fadeIn和fadeOut等一些基本的动画,基于这一现状,我自己整理总结了css3的动画,方便以后工作和学习去使用. 基本的animate的知识我就不讲了,网上有好多介绍和讲解 animate属性详解:https://blog.csdn.net/aSuncat/article/details/52588078 参考文章:https://www.cnblogs.

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery .所以会有些jQuery的动画功能Zepto实现不了,例如fade动画,但官方提供了解决办法, 主要是通过引入两个js插件:animate.js,zepto.animate.alias.js来实现完整的动画功能: zepto.animate.alia

API:http://www.css88.com/doc/zeptojs_api/ 一.建议:不要从官网下载,而是从 Github 下载了源代码之后自己 Build 一个版本,这样你可以自行挑选适合的模块.比如我挑选的模块是这么几个: polyfill,zepto,detect,event,ajax,form,fx 这7个就是标准版包含的模块 fx_methods 有了这个模块之后,.show() .hide() 等几个方法才能支持动画了,比如 .show('fast') data 提供对 .d

当两个层重叠在一起时,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,解决方案: 1.使用github上有一个叫做fastclick的库: 2.监听touchend事件,并在事件中使用preventDefault()阻止冒泡: 3.使用css3的pointer-events=true,pointer-e

从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛!可是你有没有发现下载链接上面有行小字呢? 在这个 README 里面你会惊奇地发现,Zepto 源码中有 14 个模块,而官网提供的标准版里面只有 7 个模块!而且居然不包含对移动端开发非常重要的 touch 模块(提供对触摸事件的支持)! 所以我的建议是,不要从官网下载,而是从 Github 下载

首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取焦点). 原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手

什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 现象原因:zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏

嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的Lazy Load了.自己做手机项目上也需要图片懒加载,而且手机上的图片懒加载有两种:一种是普通img标签的,一种是div标签(或者其他标签)上加背景图片的.所以就练手写了个支持以上两种情况的Zepto小插件. 功能: 支持img标签图片懒加载.div标签(或者其他标签)的背景图片懒加载: 支持预加载

简要:依赖fx.js,主要是针对show,hide,fadeIn,fadeOut的封装. 源码如下: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($, undefined){ var document = window.document, docElem = document.documentElement, or

Zepto 只针对移动端浏览器编写,因此体积更小.效率更高,更重要的是,它的 API 完全仿照 jQuery ,所以学习成本也很低. 但是在开发过程中,我发现 Zepto 还远未成熟,其中包含了一些或大或小的“坑”,与 jQuery 的差距还是很明显的,所以写篇文章记录下,希望对后来者有帮助注意,本文撰写时 Zepto 版本为 1.0 正式版 从哪里下载 Zepto 这个问题看起来很蠢,从官网下载不就行了嘛!可是你有没有发现下载链接上面有行小字呢? There are more modules;

移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下,没必要引入zepto框架,把zepto的动画模块从Zepto 扒下来,加以改造独立:用于生产环境:下面是 Demo栗子: 上面图片对应的 js var leftsbox=document.getElementById("leftsbox"); var boxdiv=leftsbox.get

http://www.zeptojs.cn/     zepto英文站在线文档 http://www.css88.com/doc/zeptojs_api/       zepto中文站在线文档 http://chaoskeh.com/blog/some-experience-of-using-zepto.html 前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Zepto 这个著名的 DOM 操作库.为什么不是 jQuery 呢?因为 jQuery 的目标是兼容所有主流浏览器,这

源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($, undefined){ var prefix = '', eventPrefix, // prefix浏览器前缀 -webkit等,eventPrefix事件前缀 vendors = { Webkit: 'webkit', Moz: '', O: 'o'

fx 模块提供了 animate 动画方法,fx_methods 利用 animate 方法,提供一些常用的动画方法.所以 fx_methods 模块依赖于 fx 模块,在引入 fx_methods 前必须引入 fx 模块. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook <reading-zepto> 内部方法 anim function anim(el, speed, opa

<!--html模块--> <header class="appoin-head"> <ul> <li class="aa"> <a href="#"> <img src="img/banner1.png" alt=""> </a> </li> <li> <a href="#"

一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变页面内容的情况下,为特性的一些输出设备定制显示效果. 使用 @media 查询,你可以针对不同的媒体类型(媒体.媒介)定义不同的样式.@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 基本语法: @media 约束词  媒体类型

// Zepto.js// (c) 2010-2016 Thomas Fuchs// Zepto.js may be freely distributed under the MIT license. var Zepto = (function() { var undefined, key, $, classList, emptyArray = [], concat = emptyArray.concat, filter = emptyArray.filter, slice = emptyArr

当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿 透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致,这个还未求证. 如下图, 当点击关闭按钮,如果下面有商品a链接,则会穿透(关闭的同时,触发了链接):     现象原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的

animate is not a function(zepto 使用报错) 1.为什么使用zepto写animate报错? 因为zepto默认构建包含: Core, Ajax, Event, Form, IE几个模块,要使用animate需要再引用fx模块. 下面附上 fx模块的链接:fx 或者: 引入这个zepto.fx.js 即可! /** * Zepto.fx.js * * 这个功能是Zepto封装的插件animate动画包 * 1. 根据浏览器属性获取前缀,并设置cssReset的属性名