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:

    Google是90后,百度是00后啊,呵呵。
    外链图片通常稍慢点,所以我基本上都本地图片。。

    1. zwwooooo says:

      @奚少
      所以改用load方法了

  2. 横向动的Slide蛮有意思的.写个教程吧

    1. 低版本 says:

      @Willin Wang
      我也觉得你站logo下的那个滚动字会很有用。。。期待。。

    2. @低版本
      什么滚动字?我怎么不知道

    3. 低版本 says:

      @Willin Wang
      呃。。可能是我描述不准确吧。。就是轮播的文字广告。。。。 :oops: :oops:

    4. @低版本
      我不记得我有放过文字广告...

    5. 低版本 says:

      @Willin Wang
      :???: :???: 描述又不准。。 仔细看是原来的叨叨改造成这样子了。。。。

    6. 低版本 says:

      @Willin Wang
      呃。。。。我说的是ZWW这里啦。。。

    7. zwwooooo says:

      @Willin Wang
      这个刚上不久,过段时间整理一下

    8. zwwooooo says:

      @低版本
      你俩说的其实是同个……

    9. @zwwooooo
      - -我直接绕糊涂了

    10. zwwooooo says:

      @Willin Wang
      哈哈,的确是

  3. Demon says:

    我现在用max-width和height:auto。这个可以试试。

    1. zwwooooo says:

      @Demon
      呵呵,不考虑IE6就可以这样啦,很简单

    2. Demon says:

      @zwwooooo
      IE6还是无视好了。

    3. zwwooooo says:

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

  4. zww大师老是折腾出来点比较实用的东西,哈哈!收走了

    1. zwwooooo says:

      @闲云野鹤
      霍霍,我也是遇到才折腾的。

    2. dh says:

      @zwwooooo 我测试下换行

  5. SErHo says:

    这种特效,直接无视IE6.

    1. zwwooooo says:

      @SErHo
      无视ie6多么简单啊

  6. CXM says:

    logo下面的滚动很有意思啊,搜索框屁股一动~字就拉出来了~我的描述YD了一点~ :sad:

    1. zwwooooo says:

      @CXM
      简称:老汉推车效果

  7. 郑永 says:

    专业文章,呵呵

    1. zwwooooo says:

      @郑永
      。。。这代码很业余

  8. wmtimes says:

    来学习下。

  9. mice says:

    :mrgreen: 我的lazyload也附带这功能 =. =

    1. zwwooooo says:

      @mice
      是js还是jQ的?jQ的貌似有问题

    2. mice says:

      @zwwooooo
      jQ的咯,你说是2次加载问题?那个我已经修复了.. :oops:

    3. zwwooooo says:

      @mice
      不是,是因为图片未加载完导致获取图片大小失效,但我已经解决了,用jq的load方法。

    4. mice says:

      @zwwooooo
      噢 我那个是加载完毕后 才会缩小图片大小 :mrgreen:

    5. zwwooooo says:

      @mice
      有几种方法,我昨天看了一下jq手册

  10. liveme says:

    什么概念,有Demo不?

    1. zwwooooo says:

      @liveme
      木有。。。有兴趣者自行折腾。。。

  11. coldplains says:

    “Google是90后”好给力的吐槽啊~~~~

    1. zwwooooo says:

      @coldplains
      哈哈,本来就是

  12. Airumo says:

    哈哈 来瞧瞧 不错哦~

  13. smilebull says:

    mark一下,过两天折腾

  14. 这个,我用的是插件,现在不想折腾了

    1. zwwooooo says:

      @yesureadmin
      本来就插件很多,自己只是试试玩玩

  15. D-TIMES says:

    头部导航,代码区,留言,都酷毙了……求文章代码区域是插件,还是自己写的?

    1. zwwooooo says:

      @D-TIMES
      自己写的代码,我曾经写过类似的在文章里面插入广告的文章,原理即如此。

  16. 小邪 says:

    “大于680px的会在图片右上角有个放大镜标识”。
    囧,看到那个放大镜标识,点了以后反而缩小了。o(* ̄▽ ̄*)ゞ

    1. zwwooooo says:

      @小邪
      因为小邪的屏幕小,哈哈哈

    2. 小邪 says:

      @zwwooooo
      纳尼?!原来是这样 (⊙o⊙)

    3. zwwooooo says:

      @小邪
      ThickBox是根据窗口大小自动缩放的,霍霍

    4. schiy says:

      @小邪
      哈哈,因为有些图片高度太大,而ThickBox是会让你看到全图的,所以分辨率小的话,就反而看到变小了 :???:

  17. 鬼鬼 says:

    路过下。。。

    1. zwwooooo says:

      @鬼鬼
      慢走,荒淫常来

  18. 万戈 says:

    先去围观一下效果~

    1. zwwooooo says:

      @万戈
      后来研究下原来有多种办法 - -

  19. N says:

    在sofish看到过效果类似的文章

    1. zwwooooo says:

      @N
      这类实现方法多种

  20. 球犯 says:

    嘿嘿 这个比较好 不过以前我是用插件的。。

    1. zwwooooo says:

      @球犯
      这个是我自个折腾完的

发表评论

昵称 *

网址

B em del U Link Code Quote