当需要在animation下动态计算keyframe水平或垂直方向的位移则比transition要麻烦许多,而且有诸多坑等着我们去踩 动态改变keyframe 通过javascript动态改变animation的keyframe比较麻烦，造成此问题的原因也是受限于CSSOM的API,特别是定义了多个帧的frame时，js基本无法去在运行时动态改变,只能通过重写cssRule来实现 function findKeyframesRule(animName) { var rule; var ss = document.styleSheets; for (var i = 0; i < ss.length; ++i) ...
移动设备对h5的touch支持不是太完善,大部分的手势都是基于3个事件来模拟实现touchstart,touchmove,touchend,具体的事件详情可以查看MDN文档 手势 click 其实h5中移动设备上本不应该以click作为主要的事件来处理,因为它是属于MouseEvents,从语义上来说tap更适合移动设备上的"点击",但是因为dom无这个事件,因此需要模拟. 移动设备上事件触发的顺序也有意思,touchstart=>touchmove=>touchend=>mousedown=>focus=>mouseup=>click,为什么会这样,因为click事件有300ms延迟,移动设备需要区分你是单机还是双击缩放,那么新的问题来了 消除click的300ms延迟 ...
_end方法 if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) { return; } if ( this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) { e.preventDefault( ...
iscroll的核心代码core.js iscroll的核心代码在core.js中，包括他的构造函数,原型方法等.而这其中最重要的属于3个方法 _start在滚动开始时候的触发 _move在滚动过程中的处理 _end在滚动结束后的处理 iscroll构造函数 用于初始化一些属性 具体的属性可以去查阅文档 下面来看iscroll的原型方法 _init方法 _initEvents: function (remove) { var eventType = remove ? utils.removeEvent : utils.addEvent, target ...
iscroll是移动端h5开发中为了实现原生滚动体验的一个库 他的主要特点是 接近原生的滚动体验(说明性能不差) 兼容性非常好(相信没哪个库敢说在H5上完美) 使用方便(只需要dom结构按照一定的规则) 功能强大(横向,纵向滚动,滚动条自定义,PC浏览器上的鼠标滚动都支持) 即便如此,当使用这个库的时候依然会踩到坑,比如配置没正确等,因此很有必要研读一下源码了解其使用原理,以便在遇到问题的时候能够快速解决,甚至构造自己的轻量级的iscroll组件 iscroll的实现核心 对touch事件的处理,包括开始,移动和结束 css3或者降级(requestAnimationFrame,setTimeout等) ...
