转摘:通用的jquery图片大小自适应代码

liu.jun 发布于 2012/06/15 09:36
阅读 780
收藏 4

分别来自:http://hi.baidu.com/qzw3288/blog/item/c1e70dc61eb19bcad10060a8.html

和 http://www.360doc.com/content/11/0926/15/16915_151361965.shtml

如下:

通用的jquery图片大小自适应代码

 所谓通用,即:
  1、任何CMS均可使用;
  2、只需要把这个代码添加到内容页模板的<head></head>之间,$('#content img)可以指定自适应某一区域的图片,$('img')就是整个网页的所有图片了;
  3、不需要任何编程基础就能使用。

var max_width=650;
    $("#content img").each(function(){
        if($(this).width() > max_width) {
            var ratio=max_width/$(this).width();
            $(this).width(max_width);
            var imgheight=$(this).height()*ratio;
            $(this).height(imgheight);
        }
    });

第二种 ============================

所谓通用,即:  

1、任何CMS均可使用;  

2、只需要把这个代码添加到内容页模板的最下方,或者直接添加到footer.htm等公共页脚模板中;  

3、不需要任何编程基础就能使用。

一般图片尺寸超过文章内容页文章内容显示区域宽度时虽然可以通过CSS来实现,如可以设置max-width:600px等属性,但是浏览器兼容性有问题,又如直接用CSS中表达式expression中通过判断图片宽高来设置CSS的,但因为涉及安全性问题,可能很多浏览器都显示不出效果。

那最好的解决办法,莫过JS了,网上有一部流传的JS包括落叶博客里的这篇文章中的解决方法,都需要在图片中加onload属性来调用函数实现,但是这样的麻烦之处是要么需要改CMS的代码,要么需要在添加文章时手动添加,比较麻烦。  

下面就是利用jquery简单实现自动识别且自动缩小图片的通用解决方案:

<script language="JavaScript" src="http://www.zzsky.cn/effect/images/jquery-1.4.2.min.js"></script>

<script language="javascript">

    $.each($("#content img"),function()

{//把“content”修改为内容页显示内容的DIV的ID属性值 

var image=new Image(); 

image.src=$(this).attr('src'); 

if(image.width>0 &amp;&amp; image.height>0)

{    if(image.width>=600)

{

//三处“600”修改为需要等比例缩小的最大图片宽度  

  $(this).attr('width',600);   

$(this).attr('height',(image.height*600)/image.width); 

}

}

    );

</script>

  上面代码需要修改的地方就是上面注释的两处。代码的意思是:查找文章内容页中id=content的DIV区域中的图片,并判断宽度,如果宽度大于指定宽度(如600)则等比例缩小。

代码只需要添加到模板的最下方即可。调用的js可以自己保存,当然很多CMS如PHPCMS、DEDECMS都已经加截了jquery.min.js,上面第一行可以不要。

加载中
返回顶部
顶部