js 实现图片缩放图标保持大小不变,位置相对于图片移动
发布时间:2018-08-13 19:01:18
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;//绑定函数到鼠标滑动事件