// 鼠标按下事件 imgContainer.onmousedown = function (e) { e.preventDefault(); isDragging = true; startX = e.clientX; startY = e.clientY; startScrollLeft = imgContainer.scrollLeft; startScrollTop = imgContainer.scrollTop; }; // 鼠标移动事件 imgContainer.onmousemove = function (e) { if (isDragging) { var moveX = e.clientX - startX; var moveY = e.clientY - startY; imgContainer.scrollLeft = startScrollLeft - moveX; imgContainer.scrollTop = startScrollTop - moveY; } }; // 鼠标释放事件 imgContainer.onmouseup = function (e) { isDragging = false; }; // 鼠标离开事件 imgContainer.onmouseleave = function (e) { isDragging = false; }; // 鼠标滚轮事件 img.onwheel = function (e) { e.preventDefault(); // 阻止默认滚轮行为处理页面滚动 var rect = img.getBoundingClientRect(); var mouseX = e.clientX - rect.left; // 鼠标在图片上的相对X坐标 var mouseY = e.clientY - rect.top; // 鼠标在图片上的相对Y坐标 var oldWidth = rect.width; // 原始图片宽度 var oldHeight = rect.height; // 原始图片高度 scale += e.deltaY > 0 ? -scaleFactor : scaleFactor; // 根据滚轮滚动方向确定缩放比例 scale = Math.max(scale, 0.1); // 最小缩放比例为0.1 var newWidth = oldWidth * scale; // 缩放后的宽度 var newHeight = oldHeight * scale; // 缩放后的高度 var scaleX = newWidth / oldWidth; // 宽度缩放比例 var scaleY = newHeight / oldHeight; // 高度缩放比例 var offsetX = (mouseX - rect.width / 2) * scaleX; // X轴偏移量 var offsetY = (mouseY - rect.height / 2) * scaleY; // Y轴偏移量 img.style.transform = scale(${scale}) translate(${offsetX}px, ${offsetY}px); }; // 关闭悬浮窗 popup.onclick = function () { document.body.removeChild(popup); isPopupVisible = false; // 标记悬浮窗为隐藏状态 }; imgContainer.appendChild(img); popup.appendChild(imgContainer); document.body.appendChild(popup); }这是修改后代码,任然存在图片跳动,无法正常放大问题
时间: 2024-04-16 11:28:28 浏览: 136
在Delphi里解决“按下鼠标左键拖拽选取”的事件.rar
在代码中,图片跳动的问题可能是由于鼠标滚轮事件处理函数中的缩放和偏移计算不准确导致的。你可以尝试修改代码,将缩放和偏移计算的逻辑分开处理,以确保计算的准确性。修改后的代码如下:
```javascript
// 鼠标滚轮事件
img.onwheel = function (e) {
e.preventDefault(); // 阻止默认滚轮行为处理页面滚动
var rect = img.getBoundingClientRect();
var mouseX = e.clientX - rect.left; // 鼠标在图片上的相对X坐标
var mouseY = e.clientY - rect.top; // 鼠标在图片上的相对Y坐标
var oldWidth = rect.width; // 原始图片宽度
var oldHeight = rect.height; // 原始图片高度
scale += e.deltaY > 0 ? -scaleFactor : scaleFactor; // 根据滚轮滚动方向确定缩放比例
scale = Math.max(scale, 0.1); // 最小缩放比例为0.1
var newWidth = oldWidth * scale; // 缩放后的宽度
var newHeight = oldHeight * scale; // 缩放后的高度
var scaleX = newWidth / oldWidth; // 宽度缩放比例
var scaleY = newHeight / oldHeight; // 高度缩放比例
var offsetX = (mouseX - rect.width / 2) * scaleX; // X轴偏移量
var offsetY = (mouseY - rect.height / 2) * scaleY; // Y轴偏移量
var newOffsetX = offsetX - (newWidth - oldWidth) / 2; // 考虑缩放引起的偏移变化
var newOffsetY = offsetY - (newHeight - oldHeight) / 2; // 考虑缩放引起的偏移变化
img.style.transform = `scale(${scale}) translate(${newOffsetX}px, ${newOffsetY}px)`;
};
```
请尝试使用上述修改后的代码,看看是否能够解决图片跳动的问题。如果问题仍然存在,请提供更多相关代码或详细描述你想要实现的效果,以便我能够提供更准确的帮助。
阅读全文