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. Veezy says:

    先沙~

    1. A.shun says:

      @Veezy
      大腿吧

  2. Veezy says:

    决定不折腾之后我把js给合并了...一行,你懂的... :cry:

    1. zwwooooo says:

      @Veezy
      你不保留原来的啊……

    2. Veezy says:

      @zwwooooo
      没...这就是比较囧的一件事,想折腾js可惜无力 :cry:

    3. zwwooooo says:

      @Veezy
      js我也无力,jQ也只是皮毛

  3. A.shun says:

    我都是手动调整的- -
    试试

    1. zwwooooo says:

      @A.shun
      其实都手动好,不过这个方便整站处理

  4. gouflv says:

    :mrgreen: 这循环结构能更简洁

    1. zwwooooo says:

      @gouflv
      这for一下代码少了很多,哈

  5. zrqx008 says:

    在写文章的时候就把图片缩放了。

    1. zwwooooo says:

      @zrqx008
      一般习惯都这样

  6. 以前也是手工调整,试试这个

  7. 汗,我的头像怎么不对了??

    1. zwwooooo says:

      @亿品元素
      你是不是换了头像?还是写错了邮箱?

  8. 再试试

  9. 1schiy says:

    我那些变态的需求,够折腾人的啊 :lol:

    1. zwwooooo says:

      @schiy
      也好,稍微缓和一下我的文囧

  10. keelii says:

    记得以前做的时候都是图片onload后作判断,但是会有一闪的不足!

    1. zwwooooo says:

      @keelii
      嗯,我看一些处理图片的都是用onload

  11. Kars says:

    自己写的 图片按比例自适应缩放 jQuery插件、、请过目、
    http://arks.tk/77/a-jquery-plugin-for-resizing-images-in-proportion/

    1. zwwooooo says:

      @Kars
      sofish的……你整理的很不错,看来还是你这个方便+强大,收藏。

    2. Kars says:

      @zwwooooo
      通过诸位大师的协助啊、、 :mrgreen:

    3. zwwooooo says:

      @Kars
      其实有个问题,对于很多图片的文章,因为图片的loading时间长会导致图片的宽高度获取失败,如何解决?

    4. Kars says:

      @zwwooooo
      你的代码里,为啥要在 document.ready 里再弄个 windows.load ?
      干嘛不用 jQuery 的 length() 获取长度?(¬_¬)

    5. zwwooooo says:

      @Kars
      囧,没细看 window.onload = function(){ ……
      这个不需要了……
      length() 不会用,没去翻手册……

    6. zwwooooo says:

      @Kars
      另外如何用jQuery判断页面是否loading完?

    7. Kars says:

      @zwwooooo
      你代码的第一行 document ready 就是 在页面载入后(只是HTML载入完成),执行下面的程序、、比 window.load 优先级高、

    8. zwwooooo says:

      @Kars
      嗯,用 document ready 在网速慢时会出现取不到图片宽高值的情况,我改为 jQuery(window).load 了

  12. 韩国 says:

    现在很少人用了。

    1. zwwooooo says:

      @韩国
      有人需要就可以了

  13. Ben says:

    踏破铁鞋无觅处,昨天还在想怎么加这个功能,今天就看到了

    1. zwwooooo says:

      @Ben
      看看能否正常工作

    2. Ben says:

      @zwwooooo
      试了下不错,IE6真是…… :shock: 无视了

    3. zwwooooo says:

      @Ben
      IE6……不鸟可以省很多功夫

  14. Paran says:

    恩 很给力

    1. zwwooooo says:

      @Paran
      代码写的比较简单……如果jQ厉害的应该不是这样写

  15. heson says:

    求demo

    1. zwwooooo says:

      @heson
      去schiy.com/blog吧

  16. 不错不错
    很实际的功能

    1. zwwooooo says:

      @老大网络
      图片多的比较有用

  17. gry says:

    应该无视IE6

    1. zwwooooo says:

      @gry
      我自己可以无视,但别人不一定

  18. Microhu says:

    IE6太悲剧了....不能忍

    1. zwwooooo says:

      @Microhu
      差不多可以完全无视了

  19. Alex Gao says:

    大哥要自创门户了,哈哈,搞个强大的效果出来吧,秒掉lightbox云云...

    1. zwwooooo says:

      @Alex Gao
      没这个能力,只能自己玩玩

  20. Paran says:

    zww 搞一个插件出来嘛

    1. zwwooooo says:

      @Paran
      插件不会……没去看过相关资料,等代码成熟点再看。

回复给 zwwooooo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote