前端页面实现鼠标滚动缩放图片，鼠标左键拖拽图片，div内部禁止页面滚动

1、写入html页面

 <section>
      <div class="container">
           <div class="test-box">
                <img id="wrap" class="test-img" src="img/cai.png"  alt="" width="100%"/>
            </div>
      </div>
 </section>

2、为html设置基本样式（container）以及相对定位样式

<style>
        .container{
            padding: 0px 15px 0px 15px;
            margin-left: auto;
            margin-right: auto;
        }
        .test-box {
            height: 1020px;
            border: 1px solid #F1F3F4;
            overflow: hidden;
            margin: 30px auto;
            position: relative;
        }
        .test-img {
            position: absolute;
            top: 0;
            left: 0;
        }
</style>

3、引入jquery文件，网上任意版本自行下载，放至动效代码最前面(需要有jquery文件才能驱使jquery代码生效)

<script src="dist/jquery.min.js"></script>

4、加入动效代码（js/jquery）

 <script>
    // 缩放
    var imgZoom = {
         init: function() { 
             this.zoomImage();
         },
         zoomImage: function() {
             var _this = this;
             $('.test-box').off('mousewheel').on('mousewheel', '.test-img', function(e) {
                 _this.mouseScroll($(this));
             });
             $('.test-box').off('DOMMouseScroll').on('DOMMouseScroll', '.test-img', function(e) {
                 _this.mouseScroll($(this), e);
             });
         },
         mouseScroll: function($img,e) {
             var e = e || window.event;
             var oper = Math.max(-1, Math.min(1,(e.wheelDelta || -e.originalEvent.detail)));
             var imgWidth = $img.width();
             var newWidth = Math.max(350, Math.min(12000,imgWidth + (30*oper)));
             var left = parseInt($img.css("left")) - (newWidth - imgWidth) / 2;
             $img.css({
                 "width": newWidth + "px",
                 "left": left + "px"
             })
         },
     };
 
 
 
    // 拖拽
    var imgDrag = function() {
         var isDrag = false;
         var dragTarget;
         var startX, startY;
         var imgPositionTop,imgPositionLeft;
         var boxWidthMin, boxWidthMax, boxHeightMin, boxHeightMax;
         function moveMouse(e) {
             if (isDrag) {
                 var e = window.event || e;
                 var clientY = e.clientY;
                 var clientX = e.clientX;
                 if(clientY >= boxHeightMin && clientY <= boxHeightMax) {
                     dragTarget.style.top = imgPositionTop + clientY - startY + "px";
                 }
                 if(clientX >= boxWidthMin && clientX <= boxWidthMax) {
                     dragTarget.style.left = imgPositionLeft + clientX - startX + "px";
                 }
                 return false;
             }
         }
         function initDrag(e) {
             var e = window.event || e;
             var dragHandle = e.srcElement;
             var topElement = "HTML";
             var eventBtn = e.button == 0 || e.button == 1; // 鼠标左键
 
             while (dragHandle.tagName != topElement && dragHandle.className != "test-img") {
                 dragHandle = dragHandle.parentElement;
             }
             if (dragHandle.className == "test-img" && eventBtn) {
                 isDrag = true;
                 dragTarget = dragHandle;
                 imgPositionTop = parseInt(dragTarget.style.top + 0);
                 startY = e.clientY;
                 imgPositionLeft = parseInt(dragTarget.style.left + 0);
                 startX = e.clientX;
 
                 var initVal = 50;  // 防止图片拖出框内的最小边界值
                 var $box =  $('.test-box');
                 boxWidthMin = $box.offset().left + initVal;
                 boxWidthMax = $box.offset().left + $box.width() - initVal;
                 boxHeightMin = $box.offset().top + initVal;
                 boxHeightMax = $box.offset().top + $box.height() - initVal;
 
                 $(document).unbind('mousemove').bind('mousemove', moveMouse);
                 return false;
             }
         }
 
         $(document).unbind("mousedown").bind("mousedown", initDrag);
         $(document).unbind("mouseup").bind("mouseup", function() {
             isDrag = false;
         });
     };
 
     imgZoom.init();
     imgDrag();
     </script>
     <script>
        window.onload = function () {
  for (i = 0; i < 50; i++) {
  var x = document.createElement('div');
  x.innerHTML = "test<br/>";
//   document.body.appendChild(x);
  }
  function $(x) {
  return document.getElementById(x);
  };
  $("wrap").onmousewheel = function scrollWheel(e) {
  var sl;
  e = e || window.event;
  if (navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
   event.returnValue = false;
  } else {
   e.preventDefault();
  };
  };
  if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
    addEventListener('DOMMouseScroll',
   function (e) {
   var obj = e.target;
   var onmousewheel;
   while (obj) {
    onmousewheel = obj.getAttribute('onmousewheel') || obj.onmousewheel;
    if (onmousewheel) break;
    if (obj.tagName == 'BODY') break;
    obj = obj.parentNode;
   };
   if (onmousewheel) {
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false; //禁⽌页⾯滚动
    if (typeof obj.onmousewheel != 'function') {
    //将onmousewheel转换成function
    eval('window._tmpFun = function(event){' + onmousewheel + '}');
    obj.onmousewheel = window._tmpFun;
    window._tmpFun = null;
    };
    // 不直接执⾏是因为若onmousewheel(e)运⾏时间较长的话，会导致锁定滚动失效，使⽤setTimeout可避免
    setTimeout(function () {
     obj.onmousewheel(e);
    },
    1);
   };
   },
   false);
  };
}
     </script>

5、完结