zoukankan      html  css  js  c++  java
  • 网页图片缩放(js)

    给图片加上onload事件:if(this.width>500)this.width=500

     

    具体步骤:

    方法一:在图片加载完毕后用onload句柄触发执行脚本,重设图片的宽度为图片宽度和300两者的最小值。
    代码示例: <img src="demo.gif" onload="if(this.width>300)this.width=300">
    或者
    <img src="demo.gif" onload="this.width=Math.min(this.width,300)">

     

    方法二:按比例缩小。只需要把js加在head之间,再在body处加入onload="ResizeImages();"代码。
    <script language="JavaScript"> 
    <!-- 
    function ResizeImages()
    {
    var myimg,oldwidth; 
    var maxwidth=180; //缩放系数 
    for(i=0;i <document.images.length;i++){
    myimg = document.images[i]; 
    if(myimg.width > maxwidth)

    oldwidth = myimg.width; 
    myimg.width = maxwidth; 
    myimg.height = myimg.height * (maxwidth/oldwidth); 


    }
    //--> 
    </script>

    <script language="JavaScript">
    <!--
    //图片按比例缩放
    var flag=false;
    function DrawImage(ImgD,iwidth,iheight){
    //参数(图片,允许的宽度,允许的高度)
    var image=new Image();
    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="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">

  • 相关阅读:
    iOS 5中的strong和weak关键字解析
    【ios】第三方开源类库SSCheckBoxView
    NSRange
    ios开发之在iOS应用中加载自定义字体显示
    IOS中NSUserDefaults的用法(本地数据存储)
    关于setTimeout运行机制
    SpringMVC入门学习框架搭建
    HashMap学习总结
    关于服务器跨域问题(使用cors解决)
    Spring IOC容器和bean
  • 原文地址:https://www.cnblogs.com/bluestorm/p/3022245.html
Copyright © 2011-2022 走看看