滚轮改变图片大小

最新推荐文章于 2025-07-21 16:50:38 发布
转载 最新推荐文章于 2025-07-21 16:50:38 发布 · 630 阅读 · 0
文章标签：

#javascript #div #firefox #border #function #html

本文介绍了一种使用鼠标滚轮实现图片缩放的方法。通过监听DOMMouseScroll和onmousewheel事件，实现在Firefox和IE浏览器中对指定div内的图片进行缩放。此功能增强了用户体验，尤其是在查看大型图片时。

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

<html>
<head>
    <title>无标题页</title>
    <script language="javascript">
      if (window.addEventListener)
      {
         window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件
      }
      //else
      //{
        // window.onmousewheel = document.onmousewheel = wheel;//ie
      //}
      
      function wheel(event)
      {
         var delta = 0;
         var div = document.getElementById("div1");
         if (!event) /* For IE. */
         {
            event = window.event;
         }
         if (event.wheelDelta)
         { 
            //让一个是IE
            //if(event.srcElement.tagName=="IMG" && div.contains(event.srcElement))
            //{
               //event.srcElement.width+=event.wheelDelta/15;
              // return false;
            //}
         } 
         else if (event.detail) 
         { 
            //如果是firefox
            var allImg = div.getElementsByTagName("IMG");
            var isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面
            for(i=0;i<allImg.length;i++)
             {
                if(allImg[i]==event.target)
                {
                   isThis=true;
                }
             }
             if(isThis && event.target.tagName=="IMG")
             {
                event.target.width=event.target.width+event.detail*12;
                event.returnValue = false;
             }
          }
          return true;
        }
        function bbimg(o)
        {
           var zoom=parseInt(o.style.zoom, 10)||100;
           zoom+=event.wheelDelta/12;
           if (zoom>0) o.style.zoom=zoom+'%';
           return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="div1"
        <table class="tablebody2" style="table-layout:fixed;" border="0" width="90%">
           <tr>
               <td>
                  <img id="11" src="UserFolder/00.jpg" onclick="javascript:window.open(this.src);" 
style="cursor: pointer;" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;" 
onmousewheel="return bbimg(this)" border="0" />
               </td>
           </tr>
         </table>
        </div>
    </form>
</body>
</html>

 
vb 查看图片的源码，可以通过鼠标滚轮实现大小缩放
12-16
vb 查看图片的源码，可以通过鼠标滚轮实现大小缩放
VC++中为PIC空间添加滚动条显示大图片
11-17
为PIC控件增添滚动条，实现大幅图片动态显示，其中用到了opencv的小部分代码，作者水平有限，适合初学者参考。 该代码合理利用可以实现图片的放大缩小旋转等功能
通过滚轮改变图片大小
weixin_30856965的博客
10-25 108
public PostForm() { InitializeComponent(); this.MouseWheel += PostForm_MouseWheel; } void PostForm_MouseWheel(object sender, MouseEventArgs e) { System.Drawing.Size t = pictu...
滚轮控制图片大小
boyhxy的专栏
07-15 1011
function bbimg(o){var zoom=parseInt(o.style.zoom,10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+%;return false;}-->http://www.2yup.com/asp/images/asp_logo1.gif" border="0" onload="
鼠标滚轮改变图片大小的示例代码
09-04
在本文中，我们将深入探讨如何利用JavaScript实现鼠标滚轮改变图片大小的功能。这个功能在许多网页应用中非常实用，比如在线查看图像、编辑图片等场景。通过监听鼠标的滚轮事件，我们可以动态调整图片的缩放比例，...
jquery 鼠标滚轮改变图片大小例子
08-10
以上就是使用jQuery实现鼠标滚轮改变图片大小的基本步骤。这个功能可以进一步优化，例如添加平滑过渡效果、考虑图片的原始比例以保持视觉效果等。通过理解并实践这些代码，你可以创建更动态、更具吸引力的网页界面。
纯HTML+js实现鼠标滚轮动态调整缩放图片大小
03-04
纯HTML+js实现鼠标滚轮动态调整缩放图片大小 演示效果: https://www.bilibili.com/video/BV1pS4y167wJ/
jQuery插件 拖拽和鼠标滚轮控制图片大小
07-26
本文将详细探讨如何利用jQuery插件实现拖拽和鼠标滚轮控制图片大小的功能，这对于创建交互式网页体验至关重要。 首先，我们要理解jQuery中的拖拽功能。拖拽通常用于创建可移动的元素，例如在网页上拖动一个图片或...
使用jQuery实现鼠标滚轮控制图片大小的效果示例
在Web前端开发中，实现用户交互效果是增强用户体验的...通过上述知识点的详细说明，我们了解到使用jQuery实现鼠标滚轮改变图片大小的原理和方法。这不仅可以增强网页的交互性，还可以为用户提供更加丰富的浏览体验。
Qt 图片缩放，支持滚轮和按键缩放
11-05
Qt5.3.2 实现的图片缩放，支持滚轮和按键缩放，复位，切换图片
Delphi 图片漫游框放大缩小及滚轮缩放
09-08
类似Windows图片查看器，实现图像的缩放，滑动鼠标中间的滚轮，可以实现图像的逐级缩放。类似Windows图片查看器，实现图像的缩放，滑动鼠标中间的滚轮，可以实现图像的逐级缩放。
使用VC++实现放大缩小图片及载入清空缩略图
08-30
该程序分为五个主要功能，分别是：载入大图，放大图片，缩小图片，载入缩略图，清空缩略图。
鼠标滚轮改变图片大小
weixin_30390075的博客
06-29 224
<!DOCTYPE html"> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>通过鼠标滚动-放大缩小图片</title> <...
jquery---实现滚轮放大缩小图片
maidu_xbd的博客
08-31 5065
（1）滚轮控制放大缩小图片效果如图： 实现代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></...
html自动调节图片的大小,网页中图片大小自动调整三种方法
weixin_33816734的博客
05-31 3688
functionbbimg(o){varzoom=parseInt(o.style.zoom,10)||100;zoom+=event.wheelDelta/12;if(zoom>0)o.style.zoom=zoom+'%';returnfalse;}screen.width-screen.width/2)this.style.width=screen.width-screen...
鼠标滚轮调整图片大小
weixin_34205826的博客
08-08 549
=======粘贴以下代码,保存为html文件可直接运行查看效果======= <html> <head> <title>鼠标滚动调整图片大小</title> <script language="javascript"> <!-- var count = 10; func...
滑轮滑动 图片跟随扩大或缩小
y_h_t的专栏
08-09 1700
滑轮滑动 图片跟随扩大或缩小
vue3实现可视化大屏布局
最新发布
遇见--专栏
07-21 141
本文实现了一个4x3宫格布局的数据可视化大屏系统，主要功能包括：1) 创建4列3行的网格布局；2) 支持设置跨行跨列区域，并自动隐藏被覆盖的单元格；3) 内容自动居中显示。通过setAreaSpanAndUpdateVisibility方法可以指定某个区域跨越的行列数，系统会自动计算并隐藏被该区域覆盖的其他单元格。例如设置区域2跨3行2列时，会自动隐藏区域3、6、7、10、11。每个单元格支持显示不同类型的组件（图表、表格、文本等），并可通过样式控制实现内容居中显示效果。
实现图片大小随鼠标滚轮变化的jquery技巧
要实现鼠标滚轮改变图片大小的功能，需要结合事件监听、获取滚动参数和动态改变图片尺寸三个部分。具体实现步骤可以是： - 绑定滚轮事件到图片元素上。 - 在事件处理函数中，获取滚轮滚动的 `deltaY` 值。 - 根据 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值