欢迎莅临阿Q的项目

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

[jQuery]创建固定大小的缩略图(thumbnail)

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

上周末,为了把阿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);
如果喜欢本文,请分享给朋友们

[jQuery]创建固定大小的缩略图(thumbnail)7 篇评论

  1. naiteluo

    配合ajax的话获取宽度高度会是0,判断是否载入完毕会比较麻烦,比较简单有效的是再插入图片的时候给图片加一个 onload事件

    • 阿Q管理员

      有道理,这个事件可以写在函数里面,我抽空研究一下。

  2. 这个,可以配合ajax使用吗?调用别的页面里的图片,然后对它进行缩略图输出。

    • 阿Q管理员

      你好,這個要想配合ajax使用,需要改成當遠程圖片載入完畢后對遠程圖片對象執行縮略動作。
      這個函數是在頁面載入后對指定的圖片進行批量縮略的。

      //Set thumbs
      function set_ajax_thumbs(obj, W, H) {
      	jQuery(obj).each(function() {
      		var w, h, t, l;
      		jQuery(this).show();
      		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;" );
      }
      //使用方法,obj是遠程載入圖片的對象
      if ( /*遠程圖片載入完畢*/) set_ajax_thumbs(obj, 50, 40);
      
  3. 博百优

    博主的文章不错 关注你的文章和你的博客 期待回访

  4. 螺旋丸

    路过 留个名字,呵呵 愿您开心快乐每一天,愿您健康幸福每一天!