前端鼠标拖拽图片、滚轮放大缩小

//拖拽

var 　offX = 0,
  　　offY = 0;
onMouseDown(ev) {
      var svgId = document.getElementById("svgId");
      svgId.style.cursor = "move";
      ev.preventDefault(); //阻止浏览器动作，有些浏览器试图拖拽图片的时候，是会把图片单独到一个页面来查看的。
      var oevent = ev || event; //兼容性处理   firefox/google
      var distanceX = oevent.clientX; //记录鼠标点击x位置
      var distanceY = oevent.clientY; //记录鼠标点击y位置
      document.onmousemove = function (ev) {
        var oevent = ev || event;
        var x1 = oevent.clientX - distanceX; //oevent.clientX是鼠标移动到的x位置，oevent.clientX-distanceX是移动的距离
        var y1 = oevent.clientY - distanceY;
        distanceX = oevent.clientX; //更新distanceX的位置信息。
        distanceY = oevent.clientY;
        svgId.style.Left= x1 + offX + "px"; //若x1为正，则鼠标向右移动，设置图片的margin-left为正，向右偏移；为负同理向左偏移。
        svgId.style.Top = y1 + offY + "px"; //offX和offY为前一次的偏移，本次移动是在前一次的基础上发生的，要加上偏移值才是鼠标本次移动后图片的位置。
        offX = x1 + offX; //记录此时图片的偏移位置
        offY = y1 + offY;
      };
      document.onmouseup = function () {
        svgId.style.cursor = "default";
        document.onmousemove = null;
      };
    },

 

//滚轮放大缩小：
onMouseWheel(ev) {
      var svgId = document.getElementById("svgId");
      var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
      down = ev.wheelDelta < 0 || ev.detail > 0 ? true : false;

      if (down) {
        if (this.scal >= 2) {
          this.scal = 2;
          svgId.style.transform = "scale(" + this.scal + ")";
          //svgId.style.transformOrigin = "0 0";
          return;
        } else {
          this.scal += 0.1;
          //console.log("放大系数: " + this.scal);
          if (this.scal <= 2 && this.scal >= 0.3)
            svgId.style.transform = "scale(" + this.scal + ")"; //scale()在这里要使用拼接的方式才能生效
        }
      } else {
        if (this.scal <= 0.3) {
          this.scal = 0.3;
          svgId.style.transform = "scale(" + this.scal + ")";
          return;
        } else {
          this.scal -= 0.1; // (parseFloat(this.scal) - 0.1).toFixed(2);
        }
        //console.log("缩小系数: " + this.scal);
        svgId.style.transform = "scale(" + this.scal + ")";
        //svgId.style.transformOrigin = "0 0";
      }
      // if (ev.preventDefault) {
      //   /*FF 和 Chrome*/
      //   ev.preventDefault(); // 阻止默认事件
      // }
      // return false;
    },

 注意这里拖动设置的位置是Left、Top,所以该图片所在的样式必须包含：

position: relative;