图片在鼠标位置以数遍滚轮滚动放大缩小

图片在鼠标位置以数遍滚轮滚动放大缩小

1、元素距离浏览器左边的间距求解`

getOffsetLeft: function(obj) {
      var tmp = obj.offsetLeft;
      var val = obj.offsetParent;
      while (val != null) {
        tmp += val.offsetLeft;
        val = val.offsetParent;
      }
      return tmp;
    },

2、元素距离浏览器顶端的间距求解

getOffsetTop: function(obj) {
      var tmp = obj.offsetTop;
      var val = obj.offsetParent;
      while (val != null) {
        tmp += val.offsetTop;
        val = val.offsetParent;
      }
      return tmp;
    },

注意：offsetLeft和offsetTop是针对父元素

3、鼠标滚轮事件

scroll: function(e) {
      let frame = document.getElementById("annotation-frame");
      if (frame == null) return;
      let offleft = this.getOffsetLeft(frame);
      let offTop = this.getOffsetTop(frame);
      let left = e.clientX - offleft;
      let top = e.clientY - offTop;
      e.preventDefault();
      image.position.x -= (left-image.position.x)*(0.25/oldScaleSize)
      //鼠标距离图片最左边的距离 算出上一次放大增大的宽度  但又保持鼠标位置不变 所以在原有的位置减去每次增大
      image.position.y -= (top-image.position.y)*(0.25/oldScaleSize)
      //同理
},
/*image.position.x和y
代表image的x轴y轴坐标，
0.25自己规定的每次放大倍数
oldScaleSize上一次的放大倍数比如1.25,1.5*/

4、火狐和谷歌的鼠标滚轮事件是不同的，

function addMouseWheelEvent(element,func) {
   if (typeof element.onmousewheel == "object") {
      element.onmousewheel = function() {
        func();
     };
   }
   if (typeof element.onmousewheel == "undefined") {
      element.addEventListener("DOMMouseScroll",func,false);
   }
 }

5、vue中的鼠标滚轮

<div class="container-box" @wheel="handleWheel"></div>