可以實(shí)現(xiàn)手勢(shì)操作：拖動(dòng)、縮放、旋轉(zhuǎn)。封裝好的腳本方法是這樣的：
10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有阿拉爾免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
重慶分公司
重慶分公司
var cat = window.cat || {};
cat.touchjs = {
left: 0,
top: 0,
scaleVal: 1, //縮放
rotateVal: 0, //旋轉(zhuǎn)
curStatus: 0, //記錄當(dāng)前手勢(shì)的狀態(tài), 0:拖動(dòng), 1:縮放, 2:旋轉(zhuǎn)
//初始化
init: function ($targetObj, callback) {
touch.on($targetObj, 'touchstart', function (ev) {
cat.touchjs.curStatus = 0;
ev.preventDefault();//阻止默認(rèn)事件
});
if (!window.localStorage.cat_touchjs_data)
callback(0, 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);
}
},
//拖動(dòng)
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) {
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);
});
},
//旋轉(zhuǎn)
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).css("-webkit-transform", transformStyle);
$targetObj.attr('data-rotate', cat.touchjs.rotateVal);
callback(cat.touchjs.rotateVal);
});
}
}; html代碼：
js調(diào)用：
var $targetObj = $('#targetObj');
//初始化設(shè)置
cat.touchjs.init($targetObj, function (left, top, scale, rotate) {};
//初始化拖動(dòng)手勢(shì)（不需要就注釋掉）
cat.touchjs.drag($targetObj, function (left, top) { });
//初始化縮放手勢(shì)（不需要就注釋掉）
cat.touchjs.scale($targetObj, function (scale) { });
//初始化旋轉(zhuǎn)手勢(shì)（不需要就注釋掉）
cat.touchjs.rotate($targetObj, function (rotate) { }); 以上所述是小編給大家介紹的touch.js 拖動(dòng)、縮放、旋轉(zhuǎn) （鼠標(biāo)手勢(shì)）功能代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
