鼠标滚轮实现图片缩放

最新推荐文章于 2022-09-17 12:45:02 发布
最新推荐文章于 2022-09-17 12:45:02 发布
阅读量2.6k 收藏 2
点赞数 1
分类专栏： 功能实现 文章标签： 鼠标滚轮实现图片缩放 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyan8120399100/article/details/51659111
版权
<!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元/天 解锁文章
一树菩提一烟霞
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标滚轮实现单文档视图的放大与缩小
塞上江南的专栏
07-28 3576
鼠标滚轮实现单文档视图的放大与缩小 其主要原理是利用SetWindowExt和SetViewportExt函数来动态调节窗口区和视口区的比例，设窗口区与视口区之间的比例系数为m_delta，鼠标滚轮每滚动一次，在视图View类的响应函数OnPrepareDC中就改变一次m_delta，然后调用OnPaint函数重新绘图，这样看起来就实现了视图的放大与缩小。 其主要步骤如下： 1. 建立单文档
滚轮根据鼠标位置缩放所绘制图形的功能
wzf1802的博客
08-20 1923
我们经常会看到一些平面设计软件例如AutoCAD等，在软件界面可利用鼠标进行图形的缩放功能，关键是它的缩放还根据鼠标位置的不同而实现不同的缩放功能。具体关键细节有如下情况： 1、滚轮滚动有两个方向，一般一个方向用于放大、另一个用于缩小，但具体哪个方向是放大哪个缩小，其实都无所谓，不同软件都不太一样。 2、一般鼠标停留的在哪个位置进行滚动滚轮时，给人的感觉是整个软件界面以鼠标点为中心进行缩放的，也就...
MFC GDI+实现以鼠标为中心缩放图片（并且可以拖动）
热门推荐
Hyman的博客
12-02 1万+
原文点击打开链接 在开始之前我们先了解一下GDI+中的坐标系统： 世界坐标(World Coordinate) 是用来制作特定绘图自然模型的坐标。 页面坐标(Page Coordinate) 则是指绘图接口(例如窗体或控件) 使用的坐标系统。 设备坐标(Device Coordinate) 是在其上进行绘图的实体装置(例如屏幕或纸张) 所使用的坐标。 “世界变换”会将世界坐标转换为页面坐
滚轮控制图片缩放
weixin_64037609的博客
09-17 224
滚轮事件控制图片缩放
鼠标滚轮实现图片（普通div）缩放
weixin_34347651的博客
03-21 2693
核心是style中的一个zoom属性，平时很少用到。其实不只是img可以缩放，任何一个div都可以。代码：<img src="../docs/images/1.png" onmousewheel="return zoomImg(this)"> <div style="width:100px;height:100px;background-color: red"onmousewhe...
jquery 鼠标滚轮实现图片缩放
03-29
然后，我们编写JavaScript代码来实现图片缩放功能。有两种不同的方法，分别对应于提供的两个文件名：`方法一（不支持火狐）.txt` 和 `方法二.txt`。 **方法一（不支持火狐）：** 这种方法主要使用jQuery的`mouse...
js实现鼠标滚轮控制图片缩放效果的方法
10-24
主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery实现的鼠标滚轮控制图片缩放功能实例
10-19
主要介绍了jQuery实现的鼠标滚轮控制图片缩放功能,结合完整实例形式分析了jQuery基于鼠标滚轮mousewheel事件进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考下
鼠标滚动实现图片放大缩小[转]
wjw806[旺旺]的专栏
09-13 4706
无标题文档
Jquery鼠标滚轮放大缩小图片
lovegonghui的专栏
11-10 8626
使用Jquery鼠标点击图片，划动鼠标滚轮放大缩小图片。 鼠标滚轮放大图片 img{ border:2px solid #000000; margin:10px; } body{ font-family:Verda
js拖动滚动带有图片放大缩小特显效果
07-03
js拖动滚动带有图片放大特显效果
js 鼠标滚动效果：图片放大缩小
全易
12-18 3312
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
关于js鼠标滚轮放大缩小图片案例
wpz82864240的博客
01-17 1万+
var myimage =document.getElementById("WebVideoImg"); if (myimage.addEventListener) { // IE9, Chrome, Safari, Opera myimage.addEventListener("mousewheel", MouseWheelHandler, false); // Fire
js鼠标滚轮放大缩小图片
wu7zhi的博客
04-18 4303
s鼠标滚轮放大缩小图片
PyQt5、PySide2、PySide6使用QLabel显示图片，缩放图片并保持长宽比
Kyrotex的博客
07-28 8131
对于比较大的图片，如果QLabel尺寸是固定的，会使得图片显示不全。对于比较小的图片，图片周围又可能留有空白。为此，应当放缩图片至合适的尺寸。如果要求图片不能变形走样，还应当保持图片的长宽比。 pixmap = QPixmap("../images/image.jpg").scaled(self.label.size(), aspectMode=Qt.KeepAspectRatio) self.label.setPixmap(pixmap) self.label.repaint() ...
【前端开发实例】JS CSS - 鼠标滚轮实现图片缩放 -（五）
JasonAPoint的博客
11-29 6396
【前端开发实例】JS CSS - 鼠标滚轮实现图片缩放 -（五）
QT-Qpixmap实现图片鼠标缩放,鼠标拖动示例(详解)
su1041168096的博客
07-19 1万+
通过 QPainter 绘画实现,以本地图片985*740为例 转载地址：https://www.cnblogs.com/lifexy/p/9057046.html 如下图所示: 效果如下所示: 实现原理 主要通过以下函数实现: void QPainter::drawTiledPixmap ( int x, int y, int w int h const QPixmap &a...
鼠标滚动缩放图片效果
weixin_33805992的博客
03-21 87
 前段时间本人在做项目时，做了一个鼠标滚动缩放图片效果，图片支持多个，多个图片循环缩放，花了点时间整理了下，把它贴出来，与大家分享下，在ie6.0,ie7.0,firefox都测试过，没有问题。 &lt;html&gt; &lt;head&gt; &lt;title&gt;鼠标滚动图片缩放&lt;/title&gt; &lt;script language="javascript"&gt;...
vue项目中鼠标滚轮缩放图片大小和拖拽效果
JackieDYH的博客
11-02 4736
这里注意如果自己的页面有滚动条，一定阻止滚动事件的默认行为，否则缩放图片的时候，页面会跟着滚动@mousewheel.prevent 阻止默认行为 示例代码 <template> <div span="8" class="left" @mousewheel.prevent="rollImg"> <img :src="imgUrl" alt="" class="img" ref="imgDiv" @mousedown="move" /> <..
实现鼠标滚轮控制图片缩放效果的代码
最新发布
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、付费专栏及课程。

余额充值