前端鼠標拖拽圖片、滾輪放大縮小

//拖拽

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;