var reqanimationframe = (function() {
return window[hammer.prefixed(window, 'requestanimationframe')] || function(callback) {
window.settimeout(callback, 1000 / 60);
};
})();
var el = $('img');
var ticking = false;
var transform;
var initscale = 1;
var _eimg = '';
for (var m = 0; m < el.length; m++) {
var mc = new hammer.manager(el[m]);
mc.add(new hammer.pan({
threshold: 0,
pointers: 0
}));
mc.add(new hammer.swipe()).recognizewith(mc.get('pan'));
mc.add(new hammer.pinch({
threshold: 0
})).recognizewith(mc.get('pan'));
mc.on('panstart panmove', onpan);
mc.on('pinchstart pinchmove', onpinch);
mc.on('swipe', onswipe);
}
function resetelement() {
el.addclass('animate');
transform = {
translate: {
x: 0,
y: 0
},
scale: 1,
angle: 0,
rx: 0,
ry: 0,
rz: 0
};
requestelementupdate();
}
function updateelementtransform() {
var value = ['translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)', 'scale(' + transform.scale + ', ' + transform.scale + ')', 'rotate3d(' + transform.rx + ',' + transform.ry + ',' + transform.rz + ',' + transform.angle + 'deg)'];
value = value.join(' ');
if (_eimg != '') {
_eimg.style.webkittransform = value;
_eimg.style.moztransform = value;
_eimg.style.transform = value;
//_eimg.css({ 'transform': value }, { '-webkit-transform': value });
}
ticking = false;
}
function requestelementupdate() {
if (!ticking) {
reqanimationframe(updateelementtransform);
ticking = true;
}
}
function onpan(ev) {
el.removeclass('animate');
transform.translate = {
x: ev.deltax,
y: ev.deltay
};
}
function onpinch(ev) {
if (ev.type == 'pinchstart') {
initscale = transform.scale || 1;
}
el.removeclass('animate');
transform.scale = initscale * ev.scale;
requestelementupdate();
_eimg = ev.target;
return _eimg;
}
function onswipe(ev) {
var angle = 10;
transform.ry = (ev.direction & hammer.direction_horizontal) ? 1 : 0;
transform.rx = (ev.direction & hammer.direction_vertical) ? 1 : 0;
transform.angle = (ev.direction & (hammer.direction_right | hammer.direction_up)) ? angle : -angle;
requestelementupdate();
_eimg = ev.target;
return _eimg;
}
resetelement();
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
node.js文件系统操作
es6解构有哪些方法
以上就是hammer.js实现移动端的图片手势放大功能的详细内容。