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/
评一波