可以实现手势操作：拖动、缩放、旋转。封装好的脚本方法是这样的：
rush:js;">
var cat = 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,1,0);
else {
var jsonObj = 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,'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) {
var initialScale = cat.touchjs.scaleVal || 1;
var currentScale;
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;
var transformStyle = '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) {
var angle = cat.touchjs.rotateVal || 0;
touch.on($targetobj,'rotate',function (ev) {
if (cat.touchjs.curStatus == 1) {
return;
}
cat.touchjs.curStatus = 2;
var totalAngle = angle + ev.rotation;
if (ev.fingerStatus === 'end') {
angle = angle + ev.rotation;
}
cat.touchjs.rotateVal = totalAngle;
var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)';
$targetobj.css("transform",transformStyle);
$targetobj.attr('data-rotate',cat.touchjs.rotateVal);
callback(cat.touchjs.rotateVal);
});
}
};
rush:js;">
js调用：
rush:js;">
var $targetobj = $('#targetobj');
//初始化设置
cat.touchjs.init($targetobj,function (left,top,scale,rotate) {};
//初始化拖动手势（不需要就注释掉）
cat.touchjs.drag($targetobj,top) { });
//初始化缩放手势（不需要就注释掉）
cat.touchjs.scale($targetobj,function (scale) { });
//初始化旋转手势（不需要就注释掉）
cat.touchjs.rotate($targetobj,function (rotate) { });
以上所述是小编给大家介绍的touch.js 拖动、缩放、旋转 （鼠标手势）功能代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
