touch.js 拖动、缩放、旋转 （鼠标手势）功能代码
可以实现手势操作：拖动、缩放、旋转。封装好的脚本方法是这样的：
varcat=window.cat||{};
cat.touchjs={
left:0,
top:0,
scaleVal:1,//缩放
rotateVal:0,//旋转
curStatus:0,//记录当前手势的状态,0:拖动,1:缩放,2:旋转
//初始化
init:function($targetObj,callback){
touch.on($targetObj,'touchstart',function(ev){
cat.touchjs.curStatus=0;
ev.preventDefault();//阻止默认事件
});
if(!window.localStorage.cat_touchjs_data)
callback(0,0,1,0);
else{
varjsonObj=JSON.parse(window.localStorage.cat_touchjs_data);
cat.touchjs.left=parseFloat(jsonObj.left),cat.touchjs.top=parseFloat(jsonObj.top),cat.touchjs.scaleVal=parseFloat(jsonObj.scale),cat.touchjs.rotateVal=parseFloat(jsonObj.rotate);
callback(cat.touchjs.left,cat.touchjs.top,cat.touchjs.scaleVal,cat.touchjs.rotateVal);
}
},
//拖动
drag:function($targetObj,callback){
touch.on($targetObj,'drag',function(ev){
$targetObj.css("left",cat.touchjs.left+ev.x).css("top",cat.touchjs.top+ev.y);
});
touch.on($targetObj,'dragend',function(ev){
cat.touchjs.left=cat.touchjs.left+ev.x;
cat.touchjs.top=cat.touchjs.top+ev.y;
callback(cat.touchjs.left,cat.touchjs.top);
});
},
//缩放
scale:function($targetObj,callback){
varinitialScale=cat.touchjs.scaleVal||1;
varcurrentScale;
touch.on($targetObj,'pinch',function(ev){
if(cat.touchjs.curStatus==2){
return;
}
cat.touchjs.curStatus=1;
currentScale=ev.scale-1;
currentScale=initialScale+currentScale;
cat.touchjs.scaleVal=currentScale;
vartransformStyle='scale('+cat.touchjs.scaleVal+')rotate('+cat.touchjs.rotateVal+'deg)';
$targetObj.css("transform",transformStyle).css("-webkit-transform",transformStyle);
callback(cat.touchjs.scaleVal);
});
touch.on($targetObj,'pinchend',function(ev){
if(cat.touchjs.curStatus==2){
return;
}
initialScale=currentScale;
cat.touchjs.scaleVal=currentScale;
callback(cat.touchjs.scaleVal);
});
},
//旋转
rotate:function($targetObj,callback){
varangle=cat.touchjs.rotateVal||0;
touch.on($targetObj,'rotate',function(ev){
if(cat.touchjs.curStatus==1){
return;
}
cat.touchjs.curStatus=2;
vartotalAngle=angle+ev.rotation;
if(ev.fingerStatus==='end'){
angle=angle+ev.rotation;
}
cat.touchjs.rotateVal=totalAngle;
vartransformStyle='scale('+cat.touchjs.scaleVal+')rotate('+cat.touchjs.rotateVal+'deg)';
$targetObj.css("transform",transformStyle).css("-webkit-transform",transformStyle);
$targetObj.attr('data-rotate',cat.touchjs.rotateVal);
callback(cat.touchjs.rotateVal);
});
}
};
html代码：
<divstyle="position:relative;width:100%;height:250px;overflow:hidden;border:1pxdashed#ff0000;"> <imgid="targetObj"style="position:relative;transform-origin:center"src="http://demo.somethingwhat.com/images/flower1.jpg"/> </div>
js调用：
var$targetObj=$('#targetObj');
//初始化设置
cat.touchjs.init($targetObj,function(left,top,scale,rotate){};
//初始化拖动手势（不需要就注释掉）
cat.touchjs.drag($targetObj,function(left,top){});
//初始化缩放手势（不需要就注释掉）
cat.touchjs.scale($targetObj,function(scale){});
//初始化旋转手势（不需要就注释掉）
cat.touchjs.rotate($targetObj,function(rotate){});
以上所述是小编给大家介绍的touch.js拖动、缩放、旋转（鼠标手势）功能代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！