`
shaq34
  • 浏览: 22681 次
  • 性别: 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)">
分享到:
评论

相关推荐

    看图Feep [2013-12-16].zip

    缩放至原始比例:鼠标左键(以鼠标点击的位置为中心缩放,移动鼠标可以拖动图片)。 切换图片:滚轮向上为上一张,滚轮向下为下一张。 全屏/窗口:单击鼠标中键。 半屏:拖动到屏幕边缘。 移动窗口:按住鼠标中...

    vanilla-js-wheel-zoom:使用鼠标滚轮+拖动可滚动图像(以及任何HTML内容)调整图像大小

    使用鼠标滚轮+拖动可滚动图像(以及任何HTML内容)调整图像大小 好处: 将图像适合任何比例的容器的能力 缩放任何HTML内容的能力 触摸屏设备支持 从版本5开始,该插件切换为使用style transform 。 要在较旧的...

    InDesign技巧汇总

    InDesign 技巧汇总 InDesign 是一款功能强大且复杂的桌面出版软件,拥有诸多实用技巧和快捷方式。了解这些技巧可以大幅提高使用 InDesign ...可以将图檔置入后,按下 [ Ctrl/Command ]+[ Shift ]键快速调整图像大小。

    变焦轮「zoomWheel」-crx插件

    此Chrome扩展程序可让您使用鼠标滚轮(滚动按钮)来缩放网页,而无需触摸键盘或移动鼠标 #功能:+按住鼠标右键并滚动以可自定义的步骤进行缩放(默认为15%)+将鼠标移到“缩放放大镜”图标上+滚动以进行缩放,以防...

    mallzoom.js:在线购物中心的图像缩放滑块插件

    添加了reverseZoom选项以更改鼠标滚轮方向解决了更改窗口大小时放大镜位置固定的问题修复了加载延迟环境中无法容纳图像的问题版本20171120 发布版本发行主功能图像缩略图滑块自定义每帧图像大小图像的部分放大输出...

    ZoomIt 3.03

    用鼠标滚轮或者上下方向键,将改变放大比例。 关于实时放大,见下。 按下Esc键 或 鼠标右键,会退出放大模式。 在放大模式下,按上鼠标左键,将保持放大状态,启用标注功能。当然,也可以退出放大,只进行标注。 2....

    orbit-simulator:二维重力沙箱

    轨道模拟器 二维牛顿物理沙箱。 控制项: 'o':显示放大的叠加层 'z':重置缩放 ']':循环视图通过实体转发 '[':通过实体向后循环查看 '。':选择下一个可用的身体... 使用鼠标滚轮调整模拟显示系数,即放大和缩小。

    CATIA的一些小技巧.doc

    11. 快速缩放:先按 Ctrl 键,然后按鼠标中键是放大缩小。先按鼠标中键,然后按 Ctrl 键是旋转。 12. 暂时隐藏命令对话框:点击荧屏右下角输入框右边的按钮。 13. 快速调入同一零件:在当前装配文件下,先用 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 ...

    程序天下:JavaScript实例自学手册

    4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 ...

    GisTool_V4.8

    向前滚动图形放大,向后滚动图形缩小,按下滚轮图形平移。 3、格式刷功能。点、线、区都可以运用格式刷进行修改和编辑。 4、查询图元功能。自动查找文本、属性、子图、颜色等。 5、参数拾取功能。拾取点、线、区...

Global site tag (gtag.js) - Google Analytics