您的位置:首页 > Web前端 > JQuery

关于使用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'});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: