先上预览地址：

https://www.somethingwhat.com/Project/Detail?id=f092710d3f7255b4

看下是不是你要的效果，不是就不用往下看了。

 

示例中我用了touch.js这个插件（百度团队开发的，但好像已经停止更新了），再自己封装了一下，可以实现手势操作：拖动、缩放、旋转。

封装好的脚本方法是这样的：

 

  1.  
    /*
  2.  
    * author: www.somethingwhat.com
  3.  
    */
  4.  
    var cat = window.cat || {};
  5.  
    cat.touchjs = {
  6.  
    left: 0,
  7.  
    top: 0,
  8.  
    scaleVal: 1, //缩放
  9.  
    rotateVal: 0, //旋转
  10.  
    curStatus: 0, //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转
  11.  
    //初始化
  12.  
    init: function ($targetObj, callback) {
  13.  
    touch.on($targetObj, 'touchstart', function (ev) {
  14.  
    cat.touchjs.curStatus = 0;
  15.  
    ev.preventDefault();//阻止默认事件
  16.  
    });
  17.  
    if (!window.localStorage.cat_touchjs_data)
  18.  
    callback(0, 0, 1, 0);
  19.  
    else {
  20.  
    var jsonObj = JSON.parse(window.localStorage.cat_touchjs_data);
  21.  
    cat.touchjs.left = parseFloat(jsonObj.left), cat.touchjs.top = parseFloat(jsonObj.top), cat.touchjs.scaleVal = parseFloat(jsonObj.scale), cat.touchjs.rotateVal = parseFloat(jsonObj.rotate);
  22.  
    callback(cat.touchjs.left, cat.touchjs.top, cat.touchjs.scaleVal, cat.touchjs.rotateVal);
  23.  
    }
  24.  
    },
  25.  
    //拖动
  26.  
    drag: function ($targetObj, callback) {
  27.  
    touch.on($targetObj, 'drag', function (ev) {
  28.  
    $targetObj.css("left", cat.touchjs.left + ev.x).css("top", cat.touchjs.top + ev.y);
  29.  
    });
  30.  
    touch.on($targetObj, 'dragend', function (ev) {
  31.  
    cat.touchjs.left = cat.touchjs.left + ev.x;
  32.  
    cat.touchjs.top = cat.touchjs.top + ev.y;
  33.  
    callback(cat.touchjs.left, cat.touchjs.top);
  34.  
    });
  35.  
    },
  36.  
    //缩放
  37.  
    scale: function ($targetObj, callback) {
  38.  
    var initialScale = cat.touchjs.scaleVal || 1;
  39.  
    var currentScale;
  40.  
    touch.on($targetObj, 'pinch', function (ev) {
  41.  
    if (cat.touchjs.curStatus == 2) {
  42.  
    return;
  43.  
    }
  44.  
    cat.touchjs.curStatus = 1;
  45.  
    currentScale = ev.scale - 1;
  46.  
    currentScale = initialScale + currentScale;
  47.  
    cat.touchjs.scaleVal = currentScale;
  48.  
    var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)';
  49.  
    $targetObj.css("transform", transformStyle).css("-webkit-transform", transformStyle);
  50.  
    callback(cat.touchjs.scaleVal);
  51.  
    });
  52.  
     
  53.  
    touch.on($targetObj, 'pinchend', function (ev) {
  54.  
    if (cat.touchjs.curStatus == 2) {
  55.  
    return;
  56.  
    }
  57.  
    initialScale = currentScale;
  58.  
    cat.touchjs.scaleVal = currentScale;
  59.  
    callback(cat.touchjs.scaleVal);
  60.  
    });
  61.  
    },
  62.  
    //旋转
  63.  
    rotate: function ($targetObj, callback) {
  64.  
    var angle = cat.touchjs.rotateVal || 0;
  65.  
    touch.on($targetObj, 'rotate', function (ev) {
  66.  
    if (cat.touchjs.curStatus == 1) {
  67.  
    return;
  68.  
    }
  69.  
    cat.touchjs.curStatus = 2;
  70.  
    var totalAngle = angle + ev.rotation;
  71.  
    if (ev.fingerStatus === 'end') {
  72.  
    angle = angle + ev.rotation;
  73.  
    }
  74.  
    cat.touchjs.rotateVal = totalAngle;
  75.  
    var transformStyle = 'scale(' + cat.touchjs.scaleVal + ') rotate(' + cat.touchjs.rotateVal + 'deg)';
  76.  
    $targetObj.css("transform", transformStyle).css("-webkit-transform", transformStyle);
  77.  
    $targetObj.attr('data-rotate', cat.touchjs.rotateVal);
  78.  
    callback(cat.touchjs.rotateVal);
  79.  
    });
  80.  
    }
  81.  
    };


调用起来很简单：

 

html：

 

  1.  
    <div style="position:relative;width: 100%;height: 250px;overflow: hidden;border: 1px dashed #ff0000;">
  2.  
    <img id="targetObj" style="position:relative;transform-origin:center" src="http://demo.somethingwhat.com/images/flower1.jpg" />
  3.  
    </div>


js：

 

 

  1.  
    var $targetObj = $('#targetObj');
  2.  
    //初始化设置
  3.  
    cat.touchjs.init($targetObj, function (left, top, scale, rotate) {};
  4.  
    //初始化拖动手势（不需要就注释掉）
  5.  
    cat.touchjs.drag($targetObj, function (left, top) { });
  6.  
    //初始化缩放手势（不需要就注释掉）
  7.  
    cat.touchjs.scale($targetObj, function (scale) { });
  8.  
    //初始化旋转手势（不需要就注释掉）
  9.  
    cat.touchjs.rotate($targetObj, function (rotate) { });


在线预览、下载全在这里：

https://www.somethingwhat.com/Project/Detail?id=f092710d3f7255b4

 

 

转载自：https://blog.csdn.net/somethingwhat/article/details/53487668