关于使用jquery bind(on,...) event.touches 问题
2014-04-22 11:08
363 查看
最近在做移动端浏览器在固定页面大小情况下实现图片大小缩放,
值得注意的地方:
封装了一个简单的方法:
值得注意的地方:
$(document).on('touchstart', function(e){ e.toches; // undefined e.originalEvent.touches; // [object] });
封装了一个简单的方法:
var ScalePic = DH.Base.create({ init : function(){ this.selector = this.options.selector; if(!this.selector) return; this.startObj = {}; this.startFn = this.proxy(this.start); this.moveFn = this.proxy(this.move); this.stopFn = this.proxy(this.stop); $(document).bind('touchstart', this.startFn); $(document).bind('touchmove', this.moveFn); $(document).bind('touchend', this.stopFn); }, start : function(e){ var $e = $(e.target), touches = e.originalEvent.touches ; if(!$e.is(this.selector)) return; if(touches.length >= 2){ var x1 = touches[0].pageX, y1 = touches[0].pageY, x2 = touches[1].pageX, y2 = touches[1].pageY, position = $e.position(), left = position.left, top = position.top, width = $e.width(), height = $e.height(), distance = this.distance(x1, y1, x2, y2) ; this.startObj = { width : width, height : height, left : left, top : top, distance : distance } } }, move : function(e){ var $e = $(e.target), touches = e.originalEvent.touches, startObj = this.startObj ; if(!$e.is(this.selector)) return; if(touches.length >= 2){ var x1 = touches[0].pageX, y1 = touches[0].pageY, x2 = touches[1].pageX, y2 = touches[1].pageY, distance = this.distance(x1, y1, x2, y2), rate = distance / startObj.distance width = rate * startObj.width, height = rate * startObj.height, left = (startObj.width - width) / 2 + startObj.left, top = (startObj.height - height) / 2 + startObj.top ; $e.css({ width : width, height : height, left : left, top : top }) } }, stop : function(e){ // 停止 }, distance : function(x, y, ex, ey){ return Math.sqrt(Math.pow(ex - x, 2) + Math.pow(ey - y, 2), 2); } }); new ScalePic({selector : '.img'});
相关文章推荐
- 关于使用jquery的messager插件的doctype问题
- 关于Scrollview嵌套ListView,使用setListViewHeightBasedOnChildren(ListView listView) ,在小米手机上崩溃问题
- jQuery使用on()绑定动态生成元素的事件无效的问题
- 关于jQuery新的事件绑定机制on()的使用技巧
- jQuery的三种bind()、on()、live()事件的对比和使用
- 关于jquery事件动态绑定(on的使用)
- 关于jquery中on绑定click事件在苹果手机失效的问题
- JQuery 1.7.2 API中bind(),on(),live()和delegate()方法的使用
- 关于使用struts2-jquery-mobile-showcase插件报错的问题!!!
- JQuery使用on绑定动态生成元素时碰到的问题
- 关于使用jQuery插件时后台session丢失的问题
- 关于main.xml中使用ImageView引起Missing contentDescription attribute on image 的问题
- 关于jquery md5插件的使用问题
- 关于IOS不能使用JQUERY的ON事件
- jQuery使用on代替bind
- 使用jquery 解决window.event 带来的兼容性问题
- Jquery 使用 onpropertychange 会被执行2遍 以及 onpropertychange 事件参数 不用attachEvent
- 关于jquery中使用slidDown出现问题的解决办法
- jquery mobile+iscroll使用时关于页面不能操作input标签问题
- 关于jQuery新的事件绑定机制on()的使用技巧