鼠标滑轮实现图片缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大缩小</title>
<style>
#imageContainer {
overflow: hidden;
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
background-color:red;
}
#imageContainer img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: none; /* 允许图片超出其原始大小 */
transition: transform 0.2s ease-in-out; /* 平滑变换效果 */
border:1px solid black;
}
</style>
</head>
<body>
<div id="imageContainer">
<img id="zoomImage" src="https://img13.360buyimg.com/n7/jfs/t1/268230/25/12615/18760/6788aef4F2cab40db/b7b4fbecd8dd72bc.png.avif" alt="Zoomable Image">
</div>
<script>
const image = document.getElementById('zoomImage');
let scale = 1; // 初始缩放比例
const scaleStep = 0.1; // 每次滚轮滚动的缩放步长
// 监听滚轮事件
document.getElementById('imageContainer').addEventListener('wheel', function(event) {
event.preventDefault(); // 阻止默认的滚轮行为
// 根据滚轮滚动方向调整缩放比例
if (event.deltaY < 0) {
// 向上滚动，放大图片
scale += scaleStep;
} else {
// 向下滚动，缩小图片
scale -= scaleStep;
}
// 限制缩放比例的范围，防止过度缩放
scale = Math.max(0.1, Math.min(5, scale));
// 应用缩放变换
image.style.transform = `translate(-50%, -50%) scale(${scale})`;
});
</script>
</body>
</html>
浙公网安备 33010602011771号