鼠标滚轮实现图片缩放

最新推荐文章于 2021-08-03 09:37:31 发布

一树菩提一烟霞

最新推荐文章于 2021-08-03 09:37:31 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：功能实现文章标签：鼠标滚轮实现图片缩放前端

本文链接：https://blog.youkuaiyun.com/zhangyan8120399100/article/details/51659111

功能实现专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用jQuery实现鼠标滚轮控制图片缩放的方法。通过监听滚轮事件，根据滚轮向上或向下的方向调整图片的宽度和高度，从而实现图片的放大和缩小效果。代码中设置了最小尺寸限制，防止图片缩放过小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script src="jquery-1.11.3.js"></script>
<script>

$(document).on("mousewheel DOMMouseScroll", function (e) {
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||
//chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
// firefox
var img = $("#target");//获取操作元素
if(delta > 0) {//放大
// 向上滚
var oWidth=img.width();//取得图片的实际宽度
var oHeight=img.height(); //取得图片的实际高度
img.width(oWidth + 50);
img.height(oHeight + 50/oWidth*oHeight);

}else if (delta < 0) {//缩小
//向下滚
var oWidth=img.width(); //取得图片的实际宽度
var oHeight=img.height(); //取得图片的实际高度
if(img.width()>100||img.height()>75){//判断如果图片缩小到原图大小就停止缩小(100和75分别为原图的宽高)
img.width(oWidth - 50);
img.height(oHeight - 50/oWidth*oHeight);
}
}
});
</script>
</head>
<body>
<img id ="target" src="Desert.jpg" alt="" style="width:100px;">
</body>
</html>