javascript 实现图片缩放

最新推荐文章于 2023-08-04 08:52:24 发布

比特窝

最新推荐文章于 2023-08-04 08:52:24 发布

阅读量755

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： JavaScript 图片

本文链接：https://blog.youkuaiyun.com/xiefuzhen/article/details/8803661

Java 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个用于实现图片自适应布局及交互功能的JavaScript脚本。该脚本可以根据预设尺寸调整图片大小，并为图片添加点击放大和IE浏览器下的滚轮缩放功能。

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

添加脚本
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(ImgD.src);};//点击打开大图片
　　　　if(navigator.userAgent.toLowerCase().indexOf("ie") > -1)
　　　　{//判断浏览器，如果是IE
　　　　　　ImgD.title ="请使用鼠标滚轮缩放图片，点击图片可在新窗口打开";
　　　　　　ImgD.onmousewheel =functionimg_zoom()//滚轮缩放
　　　　　 {
　　　　　　　　　　varzoom = parseInt(this.style.zoom, 10) || 100;
　　　　　　　　　　zoom +=event.wheelDelta / 12;
　　　　　　　　　　if(zoom> 0)　this.style.zoom = zoom +"%";
　　　　　　　　　　returnfalse;
　　　　　 } ;
　　　 }
　　　 else
　　　 {//如果不是IE
　　　　   ImgD.title ="点击图片可在新窗口打开";
　　　 }
    }
}