转载:https://blog.csdn.net/somethingwhat/article/details/53487668
$('body').on('click', '.imgScale', function() {
$('body').append('<div class="img-dialog" style="position:fixed;z-index:9999999;width:100%;height:100%;top:0px;left:0px"></div>')
var bodyW = $('body .img-dialog').width();
var bodyH = $('body .img-dialog').height();
var imgW = $(this).width();
var imgH = $(this).height();
var imgS_H = bodyW / imgW * imgH;
var imgS_W = bodyH / imgH * imgW
if (imgS_H - bodyH >= 0) {
var html = '<div style="width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;z-index:-1" onclick="closeDia()"></div>' +
'<span style="background:rgba(255,255,255,0.8);border-radius:50%;display:inline-block;width:25px;height:25px;position:absolute;top:5px;right:5px;z-index:9999;text-align:center;line-height:25px" onclick="closeDia()"><i class="aui-iconfont aui-icon-close" ></i></span>' +
'<div style="position:relative;width: 100%;height: 100%;overflow: hidden;">' +
'<img id="targetObj" style="position:relative;height:100%;left:' + (bodyW - imgS_W) / 2 + 'px" src="' + $(this).attr('src') + '" />' +
'</div>'
$('body .img-dialog').append(html)
} else {
var html = '<div style="width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;z-index:-1" onclick="closeDia()"></div>' +
'<span style="background:rgba(255,255,255,0.8);border-radius:50%;display:inline-block;width:25px;height:25px;position:absolute;top:5px;right:5px;z-index:9999;text-align:center;line-height:25px" onclick="closeDia()"><i class="aui-iconfont aui-icon-close" ></i></span>' +
'<div style="position:relative;width: 100%;height: 100%;overflow: hidden;">' +
'<img id="targetObj" style="position:relative;width:100%;top:' + (bodyH - imgS_H) / 2 + 'px" src="' + $(this).attr('src') + '" />' +
'</div>'
$('body .img-dialog').append(html)
}
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) { });
})
function closeDia() {
$('.img-dialog').remove()
}
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(); //阻止默认事件
});
cat.touchjs.left = 0;
cat.touchjs.top = 0;
cat.touchjs.scaleVal = 0
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);
}
},
//拖动
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 false;
}
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).css("-webkit-transform", transformStyle);
$targetObj.attr('data-rotate', cat.touchjs.rotateVal);
callback(cat.touchjs.rotateVal);
});
}
};
touch.js——手机端的操作手势:https://blog.csdn.net/wangjiaohome/article/details/49364177
touch.js下载:https://download.csdn.net/download/qq_36061522/10772896