鼠标滚轮实现图片缩放

最新推荐文章于 2024-08-09 17:02:08 发布
最新推荐文章于 2024-08-09 17:02:08 发布
阅读量2.7k 收藏 2
点赞数 1
分类专栏： 功能实现 文章标签： 鼠标滚轮实现图片缩放 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyan8120399100/article/details/51659111
版权
本文介绍了一种使用jQuery实现鼠标滚轮控制图片缩放的方法。通过监听滚轮事件，根据滚轮向上或向下的方向调整图片的宽度和高度，从而实现图片的放大和缩小效果。代码中设置了最小尺寸限制，防止图片缩放过小。
摘要由CSDN通过智能技术生成
<!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));             
最低0.47元/天 解锁文章
一树菩提一烟霞
关注
专栏目录
vbscript 鼠标滚轮 图片缩放效果
11-30
优秀的vbs改写js鼠标控制图片缩放特效
鼠标滚轮实现图片的缩放-------Day79
weixin_34293059的博客
05-04 367
今天是7月的最后一天了，不得不说，我定下的七月份剩余几天的计划是完不成了。一则工作确实紧了些，再则没能处理好生活、工作和学习的节奏。这才是人生最大的课题吧。只是也还好。至少自己还在坚持着。事实上真的越来越感觉到自己的不足。可昂扬的斗志却是越来越低沉的迹象，内心里总有个声音在蛊惑自己：别整那些刻意的东西，做给谁看啊，并且刻意的记录的时间全然能够拿来学很多其它的东西，可终于我还在这个蛊惑前坚持...
Unity 对图片的操作，单指拖动，双指放大缩小
最新发布
teemoboy的博客
08-09 453
【代码】Unity 对图片的操作，单指拖动，双指放大缩小。
用滚轮实现图片缩放
dianyan0163的博客
12-06 302
用滚轮实现图片缩放 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <tit...
MFC中滚轮根据鼠标位置缩放绘制的图形
08-17
利用VS2010，基于MFC的对话框程序； 可根据鼠标位置滚动鼠标滚轮时自动调节图形位置且成比例缩放所绘制的图形； 类似AutoCAD等平面设计软件中滚轮的功能； 提供所有源代码，且每行程序注释得清清楚楚，可作为有类似需求开发的很好模板。
jquery 鼠标滚轮实现图片缩放
03-29
然后，我们编写JavaScript代码来实现图片缩放功能。有两种不同的方法，分别对应于提供的两个文件名：`方法一（不支持火狐）.txt` 和 `方法二.txt`。 **方法一（不支持火狐）：** 这种方法主要使用jQuery的`mouse...
js实现鼠标滚轮控制图片缩放效果的方法
10-24
本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法，其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先，我们应当理解onmousewheel事件。这是一个鼠标...
jQuery实现的鼠标滚轮控制图片缩放功能实例
10-19
主要介绍了jQuery实现的鼠标滚轮控制图片缩放功能,结合完整实例形式分析了jQuery基于鼠标滚轮mousewheel事件进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考下
MFC鼠标中键拖动、同时滚轮缩放（根据鼠标位置）绘制的图形
08-20
1、VS2010开发的MFC对话框程序； 2、可利用中键拖动绘制的图形； 3、滚轮根据当前鼠标的位置缩放绘制的图形； 4、与AutoCAD及其他平面设计软件的鼠标功能相同。 5、可作为具有类似应用开发的模板、关键代码均提供详细的注释。
C# 通过鼠标滚轮实现缩放图片和移动图片
02-02
C# 通过鼠标实现放大图片和移动图片，内附有源码和exe,实现鼠标滚轮放大和图片平移
拖拽,鼠标滚轮放大缩小
06-02
鼠标滚轮控制放大缩小,还可以进行拖拽
Qt 鼠标拖动缩放
10-08
在Qt drag和drop基础上，实现QGraphicsItem的鼠标拖动缩放
Halcon MFC混合编程-图像显示随鼠标滚动放大缩小
热门推荐
Bettyshasha的专栏
06-13 1万+
MFC Halcon配置详见博客点击打开链接 1.新建基于对话框工程，工程名取为image 2.在类中定义如下变量和函数： public: HTuple m_hWnd; //显示窗口句柄 HObject m_hImage;//图像对象 HTuple m_hWidth;//图像宽 HTuple m_hHeight; CRect m_rtImage;
halcon窗体的移动和缩放_Halcon MFC混合编程-图像显示随鼠标滚动放大缩小
weixin_28717411的博客
12-24 1100
MFC Halcon配置详见博客点击打开链接1.新建基于对话框工程，工程名取为image2.在类中定义如下变量和函数：public:HTuple m_hWnd; //显示窗口句柄HObject m_hImage;//图像对象HTuple m_hWidth;//图像宽HTuple m_hHeight;CRect m_rtImage;CString m_strImagePath;...
MFC OpenCV：鼠标滚轮缩放图片
码农的砖块
08-03 2330
之前想在网上找opencv基于MFC开发鼠标滚轮缩放图片,发现都不是很理想,干脆自个研究了一翻,在此分享出来,话不多说,直接上代码: //头文件声明 double m_fZoom = 1.0;//初始缩放值 Mat m_oriMatImage; Mat m_zoomMatImage; //源文件代码 BOOL CopencvdemoDlg::OnMouseWheel(UINT nFlags, short zDelta, CPoint pt) { CRect rect; GetDlgItem(IDC_P
项目【MFC】（四）——鼠标滚轮缩放图像
小武的博客
08-07 8184
初始状态： 放大后： 功能： 鼠标需放在图片控件窗口，然后通过滚轮实现图片缩放，并实时显示当前分辨率和缩放倍数。 实现： 1、首先需要判断，鼠标是否停留在图片窗口，若是则响应滚轮事件；否则不响应。 2、判断是缩小，还是放大。 3、缩放时按一定步长缩放，步长可为：0.01，0.02.....等等。 4、显示更新分辨率、缩放倍数。 选中控件右击——>选择【类向导】——》【消息选择】->【滚轮】。如下： 然后跳转至消息代码，添加程序： //...
实现鼠标滚轮控制图片缩放效果的代码
06-08
可以使用以下代码实现鼠标滚轮控制图片缩放效果： ```javascript // 获取图片元素 var img = document.getElementById("myImg"); // 设置初始缩放比例 var scale = 1; // 监听鼠标滚轮事件 img.addEventListener("wheel", function(e) { e.preventDefault(); // 阻止页面滚动 var delta = e.deltaY || e.detail || e.wheelDelta; // 根据滚轮方向计算缩放比例 if (delta > 0) { scale -= 0.1; } else { scale += 0.1; } // 设置缩放样式 img.style.transform = "scale(" + scale + ")"; }); ``` 在上述代码中，我们首先获取了要操作的图片元素，然后设置了初始的缩放比例为1。接着，我们监听了鼠标滚轮事件，通过判断滚轮方向来计算缩放比例。最后，我们设置了缩放样式，将缩放比例应用到图片元素上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值