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)">

  • 相关阅读:
    《鸟哥的私房菜阅读摘要》——linux的简介和计算机基础
    抽象类可以有构造函数吗
    Java对象及对象引用变量
    html5的学习笔记
    xhtml的学习笔记
    交换机配置原理
    (转)MSI
    python xy
    Microsoft SilverLightt是一个跨浏览器的、跨平台的插件,为网络带来下一代基于.NETFramework的媒体体验和丰富的交互式应用程序。
    epub使用Adobe Digital Editions打开
  • 原文地址:https://www.cnblogs.com/bluestorm/p/3022245.html
Copyright © 2011-2022 走看看