`
shaq34
  • 浏览: 23058 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

图片按比例缩放,鼠标滚轮调整大小

阅读更多
//图片按比例缩放,可输入参数设定初始大小
function resizeimg(ImgD,iwidth,iheight) {
     var image=new Image();
     image.src=ImgD.src;
     if(image.width>0 && image.height>0){
        if(image.width/image.height>= iwidth/iheight){
           if(image.width>iwidth){
               ImgD.width=iwidth;
               ImgD.height=(image.height*iwidth)/image.width;
           }else{
                  ImgD.width=image.width;
                  ImgD.height=image.height;
                }
               ImgD.alt=image.width+"×"+image.height;
        }
        else{
                if(image.height>iheight){
                       ImgD.height=iheight;
                       ImgD.width=(image.width*iheight)/image.height;
                }else{
                        ImgD.width=image.width;
                        ImgD.height=image.height;
                     }
                ImgD.alt=image.width+"×"+image.height;
            }
     ImgD.style.cursor= "pointer"; //改变鼠标指针
     ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
    	if (navigator.userAgent.toLowerCase().indexOf("ie") > -1){ 
		//判断浏览器,如果是IE
      	ImgD.title = "请使用鼠标滚轮缩放图片,点击图片可在新窗口打开";
      	ImgD.onmousewheel = function img_zoom() //滚轮缩放
      {
          var zoom = parseInt(this.style.zoom, 10) || 100;
          zoom += event.wheelDelta / 12;
          if (zoom> 0) this.style.zoom = zoom + "%";
          return false;
      }
     } else { //如果不是IE
            ImgD.title = "点击图片可在新窗口打开";
         }
    }
}


调用方法:
<img src ="" onload="javascript:resizeimg(this,800,600)">
分享到:
评论

相关推荐

    discuz鼠标滚轮缩放控件

    标题中的“Discuz鼠标滚轮缩放控件”是指在Discuz论坛系统中,通过鼠标滚轮实现图片的缩放功能。Discuz是一款开源的PHP社区论坛软件,它允许用户自定义各种交互行为,包括对图片的操作。在这个特定的场景下,用户...

    vb 查看图片的源码,可以通过鼠标滚轮实现大小缩放

    然后,我们根据新的比例计算PictureBox的宽度和高度,并设置其SizeMode为AutoSize,这样图片会自动调整大小以适应新的尺寸。 以上就是VB中查看图片源码并实现鼠标滚轮缩放的基本步骤。需要注意的是,VB6和VB.NET的...

    wpf 鼠标滚轮控制图片的缩放

    本示例“wpf 鼠标滚轮控制图片的缩放”关注于如何利用鼠标滚轮事件来动态调整图片的大小,实现图片的放大与缩小功能。这在创建图像查看器或类似的应用时非常实用。 首先,我们需要在WPF的XAML(Extensible ...

    js实现鼠标滚轮控制图片缩放效果的方法

    本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先,我们应当理解onmousewheel事件。这是一个鼠标...

    c# picturebox 图像随鼠标滚轮缩放、拖动

    上述代码实现了基本的鼠标滚轮缩放和拖动功能,但请注意,这只是一个基础示例,实际应用中可能需要处理更多边界情况,例如图像的原始尺寸、缩放后的尺寸以及窗口大小等。 4. **优化与改进** - **平滑缩放**:使用...

    js图片缩放效果制作鼠标滚动图片等比例缩放

    这个技术的核心在于利用JavaScript事件监听和CSS3变换功能,来实现图片随着页面滚动而优雅地调整大小。下面将详细解释这一过程。 首先,我们来看`index.html`文件。这是网页的主体部分,它通常包含HTML结构以及引入...

    vs2017代码视图禁止鼠标滚轮缩放

    标题“vs2017代码视图禁止鼠标滚轮缩放”指的是一个特定的功能调整,即阻止在代码编辑器中通过鼠标滚轮进行放大或缩小操作。这对于那些习惯于使用滚轮浏览代码但不希望意外改变代码视图比例的用户来说非常有用。 ...

    C#图片浏览支持鼠标拖动与滚轮缩放.rar_C#_telephone9gy_图片缩放_缩放_鼠标缩放图片

    在该事件处理函数中,获取鼠标的滚动增量,并根据这个增量调整图片的缩放比例。可以使用一个变量来存储当前的缩放因子,每次滚轮滚动就更新这个因子,然后根据新的因子调整PictureBox的SizeMode为Zoom,使得图片自动...

    vbscript 鼠标滚轮 图片缩放效果

    总结来说,VBScript实现鼠标滚轮控制图片缩放的特效涉及了事件监听、DOM操作以及动态调整元素样式等技术。这个功能不仅可以增强用户的交互体验,还能为网页增添视觉吸引力。通过理解并实践这些知识点,开发者可以...

    Qt 图片缩放,支持滚轮和按键缩放

    我们需要重写QGraphicsView的wheelEvent()函数,根据滚轮的上滚和下滚调整图片的缩放比例。 3. **按键事件处理**:同样,通过重写keyPressEvent()和keyReleaseEvent()函数,可以捕获并响应键盘按键。例如,可以设定...

    用鼠标滚轮控制图片的缩放

    4. **更新图片大小**:根据新的缩放比例调整图片控件的大小。确保图片保持其原始的纵横比,避免拉伸或压缩。 5. **限制缩放范围**:为了避免图片过小或过大到无法清晰查看,可以设定最小和最大缩放比例。当缩放比例...

    用GDI+实现 加载图片,全屏显示,可以用滚轮控制缩放,拖动图片,定点缩放,且单击鼠标右键,定点显示放大镜图像

    在本文中,我们将深入探讨如何使用GDI+技术来实现一个功能丰富的图片查看器,它具备加载图片、全屏显示、滚轮缩放、图片拖动、定点缩放以及右键点击显示放大镜图像等功能。GDI+是Windows API的一部分,提供了一套...

    Qt 图片交互-鼠标滚轮放缩、拖拽、选点

    当用户滚动滚轮时,可以调整视图的缩放比例,从而实现图片的放大和缩小。通常,我们需要获取滚动的增量,并根据这个增量更新视图的缩放级别。 2. 图片拖拽: 要实现图片的拖动,可以重载QGraphicsView的`...

    jQuery插件 拖拽和鼠标滚轮控制图片大小

    本文将详细探讨如何利用jQuery插件实现拖拽和鼠标滚轮控制图片大小的功能,这对于创建交互式网页体验至关重要。 首先,我们要理解jQuery中的拖拽功能。拖拽通常用于创建可移动的元素,例如在网页上拖动一个图片或...

    jquery 鼠标滚轮改变图片大小例子

    在本文中,我们将深入探讨如何使用JavaScript库jQuery实现一个功能,即通过鼠标滚轮来改变网页上图片的大小。这个功能对于用户交互性极强的网页设计尤其有用,可以为用户提供更加直观和舒适的浏览体验。 首先,我们...

    利用鼠标实现图片移动和缩放

    接下来,我们讨论“鼠标滚轮实现图片缩放”。鼠标的滚轮通常用于浏览网页或文档时的上下滚动,但在图像处理软件中,它扮演了调整视图比例的角色。通过监听滚轮事件,我们可以增加或减少图片的显示大小。当用户滚动...

    wpf 界面控件随着界面大小进行缩放

    通过在控件上应用ScaleTransform,并绑定到窗口的大小,可以实现按比例缩放。 5. **Event Handling**:为了实现按Ctrl+滚轮缩放,需要监听MouseWheel事件,并在事件处理程序中更新界面的缩放比例。这可以通过使用...

    C#图片浏览(支持鼠标拖动与滚轮缩放)

    我们需要在事件处理函数中获取滚动的增量(通常通过EventArgs对象的Delta属性),然后根据增量调整PictureBox的大小或图片的缩放比例。以下是一个基本示例: ```csharp private void pictureBox1_MouseWheel(object...

    Dialog2_MFC图片以鼠标中心缩放_

    若按下了左键(鼠标捕获状态),则根据计算出的缩放比例更新图片大小,或者根据拖动距离改变图片的位置。缩放以鼠标点击点为中心,可以通过调整图片的左上角坐标来实现。这里需要注意坐标转换,从屏幕坐标转到控件...

    C# 自定义picturebox控件实现图片移动和滚轮缩放

    1. **定义变量**:初始化必要的变量,如鼠标按下时的原始位置、图片的当前缩放比例等。 ```csharp private Point dragOrigin; private float zoomFactor = 1.0f; ``` 2. **处理鼠标事件**: - `MouseDown`事件:...

Global site tag (gtag.js) - Google Analytics