鼠标滑轮实现图片缩放
<!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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
2014-02-27 基元线程同步构造之waithandle中 waitone使用