HTMer

研究互联网络和电脑应用技术的IT技术网。 (勤奋+智慧→理想)

« 微软IE8最新功能曝光——故障可自动进行恢复Windows中自动清除IE地址栏记录的方法 »

用JavaScript实现图片缩放效果代码

    我们在网页中往往会在某些栏目中放置一些图片,但是我们在设计网页的时候一定要控制好图片的大小,不然图片太大就会把页面撑的非常难看。下面给出用JavaScript实现图片缩放效果代码,可以随意控制图片的输出大小。

 
<script type="text/javascript" language="javascript">
function fixImage(i,w,h){
    var ow = i.width;
    var oh = i.height;
    var rw = w/ow;
    var rh = h/oh;
    var r = Math.min(rw,rh);
    if (w ==0 && h == 0){
        r = 1;
    }else if (w == 0){
        r = rh<1?rh:1;
    }else if (h == 0){
        r = rw<1?rw:1;
    }
    if (ow!=0 && oh!=0){
    i.width = ow * r;
    i.height = oh * r;
    }else{
      var __method = this, args = $A(arguments);
        window.setTimeout(function() {
          fixImage.apply(__method, args);
        }, 200);
    }
    i.onload = function(){}
}
</script>

    调用方法:

    1、调用的图像大小为200×200
   <img src="htmer.com.png" onload="fixImage(this,200,200)"/>

    2、调用的图像大小为原始图像大小
   <img src="htmer.com.png" onload="fixImage(this,0,0)"/>



欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]

本文链接地址:http://www.htmer.com/article/238.htm

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

HTMer , Powered By Z-Blog, 苏ICP备08003082号

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
HTM|HTML|ASP|PHP|JSP|Mysql|SQL|Dreamweaver|Flash|Fireworks|Photoshop|SEO Copyright www.HTMer.com. Some Rights Reserved. English Version