hammer.js实现图片手势放大效果
程序员文章站
2022-11-26 12:53:25
本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码,供大家参考,具体内容如下
//图片手势放大
var reqanimation...
本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码,供大家参考,具体内容如下
//图片手势放大 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();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。