hammer.js实现手势放大图像

hammer.js实现手势放大图像
这个例子给大家分享hammer.js实现具体的编码图像的手势放大效果,供大家参考,以下具体内容
图片/缩放手势
无功reqanimationframe =(函数(){()
返回窗口{ Hammer.prefixed(窗口,'requestanimationframe)函数(回调){ | | }
window.settimeout(回调,1000 / 60);
};
});
var el =美元('img);
var =假;
变量变换;
无功initscale = 1;
无功_eimg =;
对于(var m = 0;M el.length;M + +){
var =新的锤子管理器(EL });
Mc.add(新锤潘({)。
阈值:0,
指针:0
});
Mc.add(新锤。刷卡()),RecognizeWith(mc.get('pan '));
Mc.add(新锤夹({)。
门槛:0
})),RecognizeWith(mc.get('pan '));
Mc.on('panstart panmove,聚丙烯腈);
Mc.on('pinchstart pinchmove ',onpinch);
Mc.on('swipe,Onswipe);
}

功能resetelement(){
El.addClass('animate);
转换= {
翻译:{
X:0,
Y:0
},
规模:1,
角度:0,
RX:0,
0,
Rz:0
};
RequestElementUpdate();
}

功能updateelementtransform(){
VaR值= { 'translate3d(+变换。翻译。x + 'px +变换。翻译。Y + ''px ',0),规模(+变换+ ',' +变换+),'rotate3d(+ transform.rx +,+ transform.ry +,+ transform.rz + ',+变换+ 'deg)6 };
价值= value.join('');
如果(_eimg!=){
_eimg.style.webkittransform =价值;
_eimg.style.moztransform =价值;
_eimg.style.transform =价值;
/ / _eimg.css({ 'transform值},{:- WebKit变换:价值});
}
滴答=假;
}

功能requestelementupdate(){
如果(!滴答声){
ReqAnimationFrame(updateelementtransform);
滴答声;
}
}

功能聚丙烯腈(EV){
El.removeClass('animate);
transform.translate = { {
X:ev.deltax,
Y:ev.deltay
};
}

功能onpinch(EV){
如果(ev.type = = 'pinchstart){
initscale =变换| | 1;
}
El.removeClass('animate);
变换= initscale * ev.scale;
RequestElementUpdate();
_eimg = ev.target;
返回_eimg;
}

功能Onswipe(EV){
var角度= 10;
transform.ry =(ev.direction锤。direction_horizontal)1:0;
transform.rx =(ev.direction锤。direction_vertical)1:0;
变换=(ev.direction(hammer.direction_right |锤。direction_up)角度:角度);
RequestElementUpdate();
_eimg = ev.target;
返回_eimg;
}
resetelement();
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。

tag:手势图像图像电脑软件hammerjs

相关内容