zoukankan      html  css  js  c++  java
  • 网页中图片大小自动调整三种方法

    1.鼠标滚动图片大小调整

    <body>
    <script LANGUAGE="JAVASCRIPT">
    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> 
    <img src="123.jpg" onload="javascript:if(this.width>screen.width-screen.width/2) this.style.width=screen.width-screen.width/2" onmousewheel="return bbimg(this)" > 
    </body>

    2.图片自动缩小到固定大小

    <body onload="DrawImage(theimg)">
    <script language="JavaScript">
    <!--
    //图片按比例缩放
    var flag=false;
    function DrawImage(ImgD){
      var image=new Image();
      var iwidth = 320;  //定义允许图片宽度
      var iheight = 180;  //定义允许图片高度
      image.src=ImgD.src;
      if(image.width>0 && image.height>0){
       flag=true;
       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;
        }
       }

    //-->
    </script>
    <img src="123.jpg" width="1024" height="768" name="theimg">
    </body> 


    3.滚轮图片缩放的代码

    <script language="javascript">
    var count = 10;
    function resizeimg(oImage)

    count = Counting(count);
    Resize(oImage,count);
    return false;
    }
    function Counting(newzoom){ 
    if (event.wheelDelta >= 120)
    newzoom++;
    else if (event.wheelDelta <= -120)
    newzoom--;
    if (newzoom<2) newzoom=2; ////只允许缩小到20%
    if (newzoom>50) newzoom=50; ////只允许放大到500%
    return newzoom; 
    }
    function Resize(oImage,newzoom){ 
    oImage.style.zoom = newzoom + '0%'; 
    count=newzoom;
    }
    </script>

    然后在<img src="">中加入
    onDblClick="return Resize(this,10);return false;" 
    onmousewheel="return resizeimg(this)"

  • 相关阅读:
    How to change hostname on SLE
    How to install starDIct on suse OS?
    python logging usage
    How to reset password for unknow root
    How to use wget ?
    How to only capute sub-matched character by grep
    How to inspect who is caller of func and who is the class of instance
    How to use groovy script on jenkins
    Vim ide for shell development
    linux高性能服务器编程 (二) --IP协议详解
  • 原文地址:https://www.cnblogs.com/88223100/p/1241590.html
Copyright © 2011-2022 走看看