关于元素背景图的平移和缩放
在对元素背景图进行平移和缩放时，可能会遇到缩放中心始终在 0,0 的问题，无法改变其缩放中心。
为了解决这个问题，可以在缩放的同时移动背景图片的位置，达到类似的效果。
具体实现步骤如下：
获取元素边界框大小。监听滚轮事件，获取事件的鼠标位置和缩放比例变化。计算图片缩放后，缩放中心位置的偏移量。将缩放后的比例和偏移量应用到图片的 transform 属性中。
代码示例：
let box = document.querySelector('.box');let img = document.querySelector('img');let isDown = false;let downx = 0;let downy = 0;let position = { x: 0, y: 0};let scale = 1;box.addEventListener('mousewheel', function (event) { event.stopPropagation(); event.preventDefault(); let rec = img.getBoundingClientRect(); let x = (event.clientX - rec.x) / scale; let y = (event.clientY - rec.y) / scale; let delta = (event.wheelDelta ? event.wheelDelta : -event.deltaY); let ls = scale; // keep last scale scale = delta > 0 ? scale + 0.2 : scale - 0.2; if (scale > 3 || scale 0) ? 0.1 : -0.1; let x1 = (-x * m * 2) + (img.offsetWidth * m); let y1 = (-y * m * 2) + (img.offsetHeight * m); position.x += x1; position.y += y1; updateTransform();});box.addEventListener('mousedown', function (e) { isDown = true; downx = e.clientX - position.x; downy = e.clientY - position.y;});document.addEventListener('mousemove', function (e) { if (isDown) { position.x = e.clientX - downx; position.y = e.clientY - downy; updateTransform(); }});box.addEventListener('mouseup', function (e) { isDown = false;});function updateTransform() { img.style.transform = `scale(${scale}) translate(${position.x / scale}px, ${position.y / scale}px)`;}
登录后复制
以上就是如何实现元素背景图的平移和缩放，并改变缩放中心？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2653620.html
