1.touch.js插件只是用来捕获touch事件,捕获到之后要做什么操作由我们自己来决定。这样就可以进行放大缩小后图片的拖拽,进而可以看到放大后的全图。以下是代码:
参考案例:UI2\system\components\justep\touch\demo\touchjs
Model.prototype.pinch = function(event) {
var me = this;
var id = this.getIDByXID('pinch');
var posData = me.comp("posData");
var target = document.getElementById(id);
touch.on('#' + id, 'touchstart', function(ev) {
ev.target = target;
});
var initialScale = 1;
touch.on('#' + id, 'pinch', function(ev) {
currentScale = ev.scale - 1;
currentScale = initialScale + currentScale;
currentScale = currentScale > 4 ? 4 : currentScale;// 最大倍数2
currentScale = currentScale < 1 ? 1 : currentScale;// 最小倍数1
currentScale = currentScale < 1 ? 1 : currentScale;
target.style.webkitTransform = 'scale(' + currentScale + ')';
});
touch.on('#' + id, 'pinchend', function(ev) {
initialScale = currentScale;
});
var dx, dy;
touch.on('#' + id, 'drag', function(ev) {
var x = this;
dx = dx || 0;
dy = dy || 0;
var offx = dx + ev.x * 0.5 + "px";
var offy = dy + ev.y * 0.5 + "px";
target.style.webkitTransform = "scale(" + initialScale + ")" + "translate3d(" + offx + "," + offy + ",0)";
});
touch.on('#' + id, 'dragend', function(ev) {
dx += ev.x;
dy += ev.y;
});
};
2.另外,还可以使用其他的第三方js类库实现拖拽能力,比如hammerjs
http://hammerjs.github.io/
评一波