JavaScript实现网页图片等比例缩放

javascript|网页

参考了一些代码,自己写了个图片缩放的脚本,可以点击放大,同时用鼠标滑轮自由缩放.

//图片按比例缩放,可输入参数设定初始大小
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 name="" src="" >

可能必较多,如果有更好的代码,欢迎指教!

时间: 2025-01-25 08:53:55

JavaScript实现网页图片等比例缩放的相关文章

JavaScript实现网页图片等比例缩放实现代码及调用方式_javascript技巧

在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小. Javascript: 复制代码 代码如下: < script language="javascript" type="text/javascript"> < !-- // 说明:用 JavaScript 实现网页图片等比例缩放 // 整理:http://www.CodeB

jquery实现图片等比例缩放

 用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 <script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(function(){ if(!$.suppo

jquery实现图片等比例缩放以及max-width在ie中不兼容解决_jquery

上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(function(){

Javascript实现图片按比例缩放的函数

javascript|函数 图片按比例缩放函数: <script language="JavaScript"><!--//图片按比例缩放var flag=false;function DrawImage(ImgD){var image=new Image();var iwidth = 150; //定义允许图片宽度var iheight = 100; //定义允许图片高度image.src=ImgD.src;if(image.width>0 &&

五款js 图片等比例缩放效果

<script type="text/网页特效"> <!-- //图片按比例缩放---素材图片页面控制 var flag=false; function newdrawimage(imgd){  var image=new image();  var iwidth = 200;  //定义允许图片宽度  var iheight = 150;  //定义允许图片高度  image.src=imgd.src;  if(image.width>0 &&

几款js图片等比例缩放效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="cont

js兼容ie ff ie8 图片等比例缩放代码

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

JAVAScript 如何实现图片等比缩放显示

javascript|显示 <script language="JavaScript"><!--//图片按比例缩放var flag=false;function DrawImage(ImgD){var image=new Image();var iwidth = 160; //定义允许图片宽度,当宽度大于这个值时等比例缩小var iheight = 120; //定义允许图片高度,当宽度大于这个值时等比例缩小image.src=ImgD.src;if(image.wi

JS控制图片等比例缩放的示例代码

 本篇文章主要是对JS控制图片等比例缩放的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <SCRIPT language="JavaScript"> function DrawImage(ImgD,FitWidth,FitHeight){        var image=new Image();        image.src=ImgD.src;        if(image.width>0 && image.he