2011年04月05日 114条评论

jQuery方法实现自动缩放图片[beta1、beta2]

如果是IE7以上、chrome、firefox、opera、safari可以用max-width和height:auto就行了,可惜国内杯具,IE6 的使用者还不少(当然,我自己的博客主题就懒的理 IE6 了)。

这也是朋友的需求,貌似网上有很多种方法,有js实现的、有php实现的,因为朋友的主题本身用了 jQuery库,所以我自己想想还是用 jQuery 来实现吧。

折腾了好一阵才搞定,主要是忘了兼容 IE6 了,然后为了兼容即将死亡的 IE6 费了不少时间。

代码写出来后看起来就不复杂了,主要是自己对 jQuery 不熟,只能写好慢慢测试才能出来效果,效率比较低,没办法,我很懒,只掌握方法不看书的。

前提:先加载 jQuery 库,具体怎么加载问 Google小弟弟吧(Google是90后),1.3.2 版本即可,其实 1.2.6 也行

下面是核心代码:(改进的代码在后面)

jQuery(document).ready(function() {
   //jQuery方法实现自动缩放图片 beta1 by zwwooooo
   var img_cont=($('.post').find('img')).length; //查找并计算文章里面的图片个数,根据自己主题写选择器
   if (img_cont != 0) { //做个判断,没有图片就不需要了
      var maxwidth=600; //定义图片最大宽度,超过此宽度的图片自动缩为 maxwidth 值
      var maxwidth_value=maxwidth+'px';
   	for (var i=0;i<=img_cont-1;i++) {
   		var max_width=$('.post img:eq('+i+')');
   		if (max_width.width() > maxwidth) {
   			max_width.addClass('max_width_img').removeAttr("width").removeAttr("height").css({"cursor":"pointer","width":maxwidth_value,"height":"auto"});
   		}
   	}
   }
});

代码也许不完善(没有在各种环境下测试),或许有这种那种问题,有兴趣者自行测试折腾。

高手们觉得有什么不足之处请指教。

2011.4.5 22:20 发现问题:如果文章图片载入慢会导致判断失效!(已解决)

……后来琢磨后发现下面这样就OK鸟:

效果可以围观 http://schiy.com/blog 文章里面的图片:大于680px的会在图片右上角有个放大镜标识

jQuery(window).load(function(){
/* jQuery方法实现自动缩放图片 beta2 by zwwooooo */
   	var img_cont=($('.post').find('img')).length; //查找并计算文章里面的图片个数,根据自己主题写选择器
   	if (img_cont != 0) { //做个判断,没有图片就不需要了
   		var maxwidth=600; //定义图片最大宽度,超过此宽度的图片自动缩为 maxwidth 值
   		var maxwidth_value=maxwidth+'px';
   		for (var i=0;i<=img_cont-1;i++) {
   			var max_width=$('.post img:eq('+i+')');
   			if (max_width.width() > maxwidth) {
   				max_width.addClass('max_width_img').removeAttr("width").removeAttr("height").css({"cursor":"pointer","width":maxwidth_value,"height":"auto"});
  			}
  		}
   	}
});

这下正常鸟。

zww
or
oooo

“jQuery方法实现自动缩放图片[beta1、beta2]”有114条评论

  1. 漠天 says:

    怎么自动添加放大镜效果。

    1. zwwooooo says:

      @漠天
      你指demo blog里面的?那个是额外添加的,不在 zShowBox 功能之内。

  2. [...] 再啰嗦一点重要的东西,前段时间我一直用的一个js,用来调整ie兼容问题的,感觉还不错!例如zww大叔写的那个《jQuery方法实现自动缩放图片[beta1、beta2]》用这个js就可以让IE6这个脑残的浏览器知道什么是max-width了,类似的一些IE BUG都能解决!使用方法就是把下面代码贴在html里面就可以了,省事吧! [...]

  3. 无冷 says:
    removeAttr("width")

    感觉可以不要,可以attr修改width

    1. zwwooooo says:

      @无冷
      嗯嗯,木有去优化了

  4. 牧羊人 says:

    z大,你这个只能缩小,有没有放大的哇!

    1. zwwooooo says:

      @牧羊人 这个本身是放大吧,只是局限在浏览器窗口大小内。

    2. 牧羊人 says:

      @zwwooooo 唔,简单测试了下,没有成功;

      回头再看看