可以实现手势操作:拖动,缩放,旋转。封装好的脚本方法是这样的:
猫var=窗口。猫| | {};
猫。touchjs={
左:0,
上图:0,
scaleVal: 1、//缩放
rotateVal: 0,//旋转
curStatus: 0,//记录当前手势的状态,0:拖动,1:缩放,2:旋转//初始化
初始化:函数(targetObj美元,回调){
联系。在($ targetObj touchstart的函数(ev) {
cat.touchjs。curStatus=0;
ev.preventDefault();//阻止默认事件
});
如果(! window.localStorage.cat_touchjs_data)
回调(0,0,1,0);
其他{
var jsonObj=JSON.parse (window.localStorage.cat_touchjs_data);
cat.touchjs。cat.touchjs左=parseFloat (jsonObj.left)。顶级=parseFloat (jsonObj.top), cat.touchjs。scaleVal=parseFloat (jsonObj.scale), cat.touchjs。rotateVal=parseFloat (jsonObj.rotate);
回调(cat.touchjs。离开了,cat.touchjs。前,cat.touchjs。scaleVal cat.touchjs.rotateVal);
}
},//拖动
阻力:函数(targetObj美元,回调){
联系。在(targetObj美元,“拖”,函数(ev) {
targetObj美元。cat.touchjs css(“左”。左+ ev.x)。css(“顶级”,cat.touchjs。前+ ev.y);
});
联系。在($ targetObj拖动结束的函数(ev) {
cat.touchjs。左=cat.touchjs。左+ ev.x;
cat.touchjs。=cat.touchjs。前+ ev.y;
回调(cat.touchjs。离开,cat.touchjs.top);
});
},//缩放
规模:函数(targetObj美元,回调){
var initialScale=cat.touchjs。scaleVal | | 1;
var currentScale;
联系。(targetObj美元,“捏”、功能(ev) {
如果(cat.touchjs。curStatus==2) {
返回;
}
cat.touchjs。curStatus=1;
currentScale=电动汽车。规模- 1;
currentScale=initialScale + currentScale;
cat.touchjs。scaleVal=currentScale;
var transformStyle=' (' + cat.touchjs规模。scaleVal + ') (' + cat.touchjs旋转。rotateVal +“度)”;
targetObj美元。css(“变换”,transformStyle)。css (“-webkit-transform transformStyle);
回调(cat.touchjs.scaleVal);
});
联系。在($ targetObj pinchend的函数(ev) {
如果(cat.touchjs。curStatus==2) {
返回;
}
initialScale=currentScale;
cat.touchjs。scaleVal=currentScale;
回调(cat.touchjs.scaleVal);
});
},//旋转
旋转:函数(targetObj美元,回调){
var=cat.touchjs角度。rotateVal | | 0;
联系。在(targetObj美元,“旋转”,函数(ev) {
如果(cat.touchjs。curStatus==1) {
返回;
}
cat.touchjs。curStatus=2;
var totalAngle=+ ev.rotation角;
如果(ev)。fingerStatus===敖崾?{
角=角+ ev.rotation;
}
cat.touchjs。rotateVal=totalAngle;
var transformStyle=' (' + cat.touchjs规模。scaleVal + ') (' + cat.touchjs旋转。rotateVal +“度)”;
targetObj美元。css(“变换”,transformStyle)。css (“-webkit-transform transformStyle);
targetObj美元。attr (data-rotate, cat.touchjs.rotateVal);
回调(cat.touchjs.rotateVal);
});
}
};之前
html代码:
& lt; div比;
& lt; img id=" targetObj " src=" https://cache.yisu.com/upload/information/20200622/114/77432.jpg "/比;
& lt;/div>
, js调用:
var targetObj=美元(“# targetObj”);//初始化设置
cat.touchjs。init()美元targetObj、功能(左,上,规模、旋转){};//初始化拖动手势(不需要就注释掉)
cat.touchjs。拖(targetObj美元,函数(左){});//初始化缩放手势(不需要就注释掉)
cat.touchjs。规模(targetObj美元,函数(规模){});//初始化旋转手势(不需要就注释掉)
cat.touchjs。旋转(targetObj美元,函数(旋转){});之前
以上所述是小编给大家介绍的联系。js拖动,缩放,旋转(鼠标手势)功能代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
