利用onmousewheel事件控制圖像大小

最新推荐文章于 2024-01-24 15:39:54 发布
最新推荐文章于 2024-01-24 15:39:54 发布
阅读量1.3k 收藏
点赞数
分类专栏： JS 文章标签： function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caaclxf/article/details/322908
版权

function bbimg(o)
{
 var zoom=parseInt(o.style.zoom,10)||100;zoom+=event.wheelDelta/12;
 if (zoom>0) o.style.zoom=zoom+'%';return false;
} 

<img src="" onmousewheel="return bbimg(this)">

caaclxf
关注
专栏目录
鼠标滚轮改变图片大小的示例代码
09-04
主要是对用鼠标滚轮改变图片大小的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
使用滚轮事件放大放小图片
他的博客
08-05 2443
给HTML中需要放大放小的图片标签一个ID属性和一个滚动事件 <img id="imgId" onmousewheel="roll()" src="images/Ashe_square_0.png"></img> 然后实现滚轮事件 //滚轮事件放大放小图片 function roll(){ //获取图片的当前大小 var wSize = document.getE...
360全景制作笔记（2）
星辰的笔记
01-26 575
360全景制作笔记 1、制作项目启动画面 项目封面设置 layer name=&quot;intro_jpg&quot; url.normal=&quot;common/sw.jpg&quot; //PC端启动画面图 url.mobile=&quot;common/sw.jpg&quot; //移动端启动画面图 preload=&quot;t
鼠标滚轮事件和右键事件
sliencebohetang的博客
02-21 990
JS触发鼠标滚轮事件
echarts 柱状图滚动
qq_41954585的博客
11-23 6113
zoomOnMouseWheel 关闭滚轮缩放, 关闭后滚轮滚到最后不会有回弹抖动。这里的startValue和endValue代表初始只显示七个，七组柱子。实现效果：柱形图展示水平滚动条，并且鼠标滚动支持让滚动条平移。minValueSpan代表放大到最少到显示几个。maxValueSpan代表缩小到最多显示几个。既要内置型的能在图中滚动，又要滚动条的样式。echarts文档里，图形的滚动条分两种。而我们要实现的就是综合了这两种。开启后滚轮往下滚数据往后移动。再添加到option里即可。
Echarts dataZoom缩放功能参数详解：
公子世无双,陌上人如玉
01-15 1万+
dataZoom=[ //区域缩放 { id: 'dataZoomX', show:true, 　 //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。 backgroundCol...
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
虎康的博客
12-04 5861
echarts 区域缩放 滚动显示 x轴 y轴 缩放
onmousewheel event 缩放图片效果
12-04
在标题和描述中，我们看到一个示例是利用`onmousewheel`事件来改变图片的大小。当鼠标光标移动到图片上，并且用户滚动鼠标滚轮时，图片的尺寸会相应地扩大或收缩。通常，这个效果是通过JavaScript代码实现的，它监听...
HTML控件事件一览表
12-09
通过合理利用这些事件，可以创建出功能更加强大且用户体验更佳的应用程序。理解每个事件的作用和触发条件对于开发高效、响应式的 Web 应用至关重要。此外，结合实际应用场景进行实践，能够更好地掌握这些事件的使用...
c# 用滚轮、单击按钮事件实现图片放大缩小移动
11-08
// 创建新的图像大小 Size newSize = new Size((int)(img.Width * scaleFactor), (int)(img.Height * scaleFactor)); Bitmap bitmap = new Bitmap(newSize.Width, newSize.Height); using (Graphics g = ...
比较方便的onMouseWheel缩放图片效果 原创
12-09
代码如下:<HTML>   <HEAD>   <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>   <TITLE>onMouseWheel缩放图片效果－www.jb51.Net</TITLE> <body> [removed] function bbimg(o) {   var zoom=parseInt(o.style.zoom, 10)||100;   zoom+=event.wheelDelta/12;   if (zoom>0) o.style.zoom=zoom+’%’; } function ad
基于delphi的地图放大缩小控制
09-21
在地图应用中，我们可以将地图图像加载到该控件上，并利用它的事件处理机制来响应用户的交互操作。 针对地图放大缩小的需求，我们需要关注的是鼠标的滚轮事件。Delphi中的控件通常都有OnMouseWheel事件，该事件在...
Delphi开发之：在DBGrid中用Mouse滚动键滚动记录
Windy 风慢慢吹
06-24 1480
首先在Unit的 private中写一过程OnMouseWheel。如下：private    { Private declarations }        procedure OnMouseWheel(Var Msg :TMsg;var Handled:Boolean); 接着，实现OnMouseWheell过程的代码如下：Procedure TDeptfrm.OnMouseWhe
【echarts 】设置datazoom 允许使用鼠标滚轮滚动图表
hzxOnlineOk的博客
09-12 2903
PS：以下代码示例的配置中，包含了X轴和Y轴（默认只有2个轴，>2个轴的需要自行修改配置）
echarts柱状统计图实现滚动条缩放和鼠标滚轮缩放统计图
01-24 1396
moveOnMouseWheel: true// 不按任何功能键，鼠标移动能触发数据窗口平移。zoomOnMouseWheel: true,// 不按任何功能键，鼠标滚轮能触发缩放。
echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
热门推荐
細水、長流√的专栏
09-10 2万+
echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
onmousewheel event缩放图片效果
小蜗牛的专栏
07-06 748
  onmousewheel event缩放图片效果 var count = 10; function Picture() { count = Counting(count); Resize(count); return false; } function Counting(count){ if (event.wheelDelta >= 120) count++; else if (ev
onmousewheel鼠标滚轮事件绑定的兼容性问题
SuperCoooooder的博客
09-01 4960
其实我对于各个浏览器的兼容性知道的是少之又少，所了解的也不过是event||window.event , e.target||e.srcElement,element,nextSibling||nextElementSibing等等之类的日常需要用到的一些属性的兼容性写法，关于这些，如果有朋友不知道，我改日抽空会把自己封装出的一些小方法贴出来，并讲解一下，如果是大神就一笑而过就好了。     进
ARCore（Android的增强现实）：ARCore性能优化与调试技巧.docx
最新发布
11-01
ARCore（Android的增强现实）：ARCore性能优化与调试技巧
onmousewheel事件实现滚轮缩放
03-21
onmousewheel事件可以通过JavaScript来实现滚轮缩放。可以使用event.deltaY属性来获取滚轮滚动的方向和距离，然后根据需要进行缩放操作。以下是一个简单的示例代码： ``` document.addEventListener('mousewheel', function(event) { var delta = event.deltaY; // 根据delta的值进行缩放操作 }); ``` 注意，不同浏览器可能会有不同的事件名称和属性名，需要进行兼容性处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值