html、css、js实现图片放大功能，包括拖拽和滚动焦点缩放
以下是一个简单的HTML、CSS和JavaScript代码示例，实现了图片的放大功能，包括拖拽和滚轮控制的缩放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom</title>
<style>
#imageContainer {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
cursor: move;
border: 1px solid #000;
}
img {
position: absolute;
width: 100%;
height: auto;
transform-origin: top left;
transition: transform 0.1s;
}
</style>
</head>
<body>
<div id="imageContainer">
<img id="zoomableImage" src="path_to_your_image.jpg" alt="Zoomable Image">
</div>
<script>
const container = document.getElementById('imageContainer');
const img = document.getElementById('zoomableImage');
let startX, startY, x, y;
container.addEventListener('mousedown', function(e) {
startX = e.pageX - x;
startY = e.pageY - y;
container.style.cursor = 'grabbing';
document.addEventListener('mousemove', moveImage);
document.addEventListener('mouseup', stopMoving);
});
function moveImage(e) {
x = e.pageX - startX;
y = e.pageY - startY;
img.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
}
function stopMoving() {
container.style.cursor = 'move';
document.removeEventListener('mousemove', moveImage);
document.removeEventListener('mouseup', stopMoving);
}
container.addEventListener('wheel', function(e) {
e.preventDefault();
const scale = img.getBoundingClientRect().width / container.offsetWidth;
const scaleFactor = e.deltaY > 0 ? 1.1 : 0.9;
img.style.transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + scale * scaleFactor + ')';
});
</script>
</body>
</html>在这个示例中，图片可以通过鼠标拖拽来移动，并且可以通过滚轮的滚动（向上为放大，向下为缩小）来缩放。你需要替换path_to_your_image.jpg为你的图片路径。这个示例提供了基本的放大缩小功能，没有包括边界检查或任何性能优化。
评论已关闭