Old

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

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25438

114 comments

  1. Veezy Veezy Google Chrome 12 Google Chrome 12 Windows 7 Windows 7

    先沙~

    沙发
  2. Veezy Veezy Google Chrome 12 Google Chrome 12 Windows 7 Windows 7

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

    板凳
  3. A.shun A.shun Opera 11 Opera 11 Windows XP Windows XP

    @Veezy
    大腿吧

  4. ......
  5. 漠天 漠天 Internet Explorer 9 Internet Explorer 9 Windows 7 Windows 7

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

    41楼
    • zwwooooo zwwooooo Namoroka 3 Namoroka 3 Windows 7 Windows 7

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

  6. wordpress又升级了 – 闲云野鹤夫妻博客 - pingback on 2011/05/30/ 18:40
    42楼
  7. 无冷 无冷 Internet Explorer 6 Internet Explorer 6 Windows XP Windows XP
    removeAttr("width")

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

    43楼
  8. 牧羊人 牧羊人 Google Chrome 54 Google Chrome 54 Windows 10 Windows 10

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

    44楼

Leave a Reply