专业WP商业设计开发销售中心

上周末，为了把阿Q的项目文章列表变的与众不同，我得创建固定大小的缩略图。有两种方法，一是使用php程序，或者使用Javascript。

考虑了一下，如果使用php程序的话还要建立缓存，我不想服务器在可控范围内有多余的文件存在，最终还是决定用js来解决。

思路是这样：

1、首先建立一个div标签，赋予class名thumbs_block，用来将图片限制在指定的尺寸范围内：

<div class="thumbs_block"><a href=""><img  src="" /></a></div>

2、并且加上以下css，如果指定的高宽都是150px：

.thumbs_block {
	width: 150px;
	height: 150px;
}
.thumbs_block a {
	width: 150px;
	height: 150px;
	display: block;
	position:relative;
	overflow: hidden;
}
.thumbs_block img {
	position:relative;
}

3、jQuery 代码如下，原理是先获取被缩略图的高宽，并且在判断指定高宽大小以及被缩略图的高宽大小不同的情况下相应更改被缩略图的高宽及其相对位置以居中显示：

//Set thumbs
//v1.1 (文档完全载入后显示缩略图)
function set_thumbs(obj, W, H) {
	jQuery(obj + ' img').hide();
	jQuery(window).bind("load", function(){
		jQuery(obj + ' img').each(function() {
			var w, h, t, l;
			var cw = jQuery(this).width();
 			var ch = jQuery(this).height();
			w = W;
			h = ch*W/cw;
			if (h>H) {
				l = 0;
				t = (ch*W/cw-H)/2;
			} else {
				h = H;
				w = H*cw/ch;
				l = (H*cw/ch-W)/2;
				t = 0;
			}
			jQuery(this).attr('style', 'width: ' + w + 'px; height: ' + h + 'px; left: -' + l + "px; top: -" + t + "px;" ).hide().fadeIn('slow');
		});
	});
}
//v2.0(判断图片载入后显示缩略图)
function set_thumbs(obj, W, H) {
	jQuery(obj + ' img').hide().each(function() {
		var w, h, t, l, cw, ch;
		function doResize(o) {
			cw = o.width();
			ch = o.height();
			w = W;
			h = ch*W/cw;
			if (h>H) {
				l = 0;
				t = (ch*W/cw-H)/2;
			} else {
				h = H;
				w = H*cw/ch;
				l = (H*cw/ch-W)/2;
				t = 0;
			}
			o.attr('style', 'width: ' + w + 'px; height: ' + h + 'px; left: -' + l + "px; top: -" + t + "px;").hide().fadeIn('slow');
		}
		if (jQuery(this).get(0).complete) doResize(jQuery(this));
		else jQuery(this).bind("load", function() { doResize(jQuery(this)); });
	});
}

4、最后，在页面的末尾加上以下js代码激活函数即可，需要设置指定的缩略图大小：

set_thumbs('.thumbs_block', 150, 150);