js 实现图片缩放

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JaRiS_jade/article/details/81634534

js 实现图片缩放图标保持大小不变，位置相对于图片移动

html

<div name="images1" style="zoom: 1; transform: scale(1); width: 5146px; height: 4583px;" id="images1">
    <img id="floorPlanPicture" src="图片地址" alt="" />
    <div>
        <span class="siteicon" data-left="5278.89657634" data-top="3453.1816" style="left: 5278.89657634px;top: 3453.1816px;color:#ff0000;zoom:1;transform:scale(1);">
            <i class="fa fa-map-marker"> </i>//图标
            <i>1</i>//序号 
        </span>
        ......*13
    </div>
</div>

js

var image1 = document.getElementBy('images1');//获取包含图片和图标的div
var scrollFunc = function(e) {
   e.stopPropagation();
   e = e || window.event;
   zoom = parseFloat(images1.style.zoom);
   zoomIcon = icon[0].style.zoom;
   //图标的放大缩小
   if (e.wheelDelta) { //IE/Opera/Chrome
       tZoom = zoom + (e.wheelDelta > 0 ? 0.05 : -0.05);
   } else if (e.detail) { //Firefox
       tZoom = zoom + (e.detail > 0 ? -0.05 : 0.05);
   }

   if (tZoom < 0.1) return true;
   sZoom = 1 / tZoom;//图标的放大缩小
   images1.style.zoom = tZoom;
   images1.style.transform = 'scale(' + tZoom + ')';
   for (var i = 0; i < icon.length; i++) {
       var style = icon[i].style;
       var left = icon[i].getAttribute('data-left') * tZoom;//改变图标的位置
       var top = icon[i].getAttribute('data-top') * tZoom;//改变图标的位置
       style.left = left + 'px';
       style.top = top + 'px';
       style.zoom = sZoom;
       style.transform = 'scale(' + sZoom + ')';
   }
}

images1.onmousewheel = scrollFunc;//绑定函数到鼠标滑动事件

原图

缩小的图

放大的图