本文实例为大家分享了hammer.js实现图片手势放大效果的具体代码,供大家参考,具体内容如下
//图片手势放大
var reqAnimationFrame=(函数(){
返回窗口(锤。前缀(窗口,requestAnimationFrame)] | |函数(回调){
窗口。setTimeout(回调,1000/60);
};
})();
el=$ var (img);
var定时=false;
变量变换;
var initScale=1;
var _eImg=";
(var m=0;m & lt;el.length;m + +) {
var mc=new Hammer.Manager (el [m]);
mc.add(新Hammer.Pan ({
阈值:0,
指针:0
}));
mc.add(新Hammer.Swipe ()) .recognizeWith (mc.get(“锅”));
mc.add(新Hammer.Pinch ({
阈值:0
})).recognizeWith (mc.get(“锅”));
mc.on (“panstart panmove’, onPan);
mc.on (“pinchstart pinchmove’, onPinch);
mc.on(“刷卡”,onSwipe);
}
函数resetElement () {
el.addClass(“动画”);
变换={
翻译:{
x: 0,
y: 0
}，
规模:1、
角度:0,
处方:0,
一:0,
rz: 0
};
requestElementUpdate ();
}
函数updateElementTransform () {
var值=https://www.yisu.com/zixun/[' translate3d (' + transform.translate。x + + transform.translate px,。y + ' px, 0)”、“量表(' +变换。规模+”、“+变换。规模+ ')”、“rotate3d(' +变换。rx +”、“+变换。一+”、“+变换。rz +”、“+变换。角+‘度)];
值=https://www.yisu.com/zixun/value.join (' ');
如果(_eImg !=") {
_eImg.style。webkitTransform=价值;
_eImg.style。mozTransform=价值;
_eImg.style。变换=价值;//_eImg。css({“变换”:价值},{}“-webkit-transform”:价值);
}
定时=false;
}
函数requestElementUpdate () {
如果(定时){
reqAnimationFrame (updateElementTransform);
定时=true;
}
}
函数onPan (ev) {
el.removeClass(“动画”);
变换。翻译={
x: ev.deltaX,
y: ev.deltaY
};
}
函数onPinch (ev) {
如果(ev)。类型==pinchstart) {
initScale=变换。规模| | 1;
}
el.removeClass(“动画”);
变换。规模=initScale * ev.scale;
requestElementUpdate ();
_eImg=ev.target;
返回_eImg;
}
函数onSwipe (ev) {
var=10角;
变换。ry=(ev。方向,Hammer.DIRECTION_HORIZONTAL) & # 63;1: 0;
变换。rx=(ev。方向,Hammer.DIRECTION_VERTICAL) & # 63;1: 0;
变换。角=(ev。方向,(锤。DIRECTION_RIGHT | Hammer.DIRECTION_UP) & # 63;角:角;
requestElementUpdate ();
_eImg=ev.target;
返回_eImg;
}
resetElement ();
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
