利用jQThumb – jQuery缩略图插件,将网页列表内的图片等比例缩放

jswusn.com JS 2018-12-17 18:43:38 1921次浏览

  苏州网站建设在制作网页的时候,会将网页设计师精心设计的效果图切成网页代码,但是每每遇到将整个网站制作完成了过后,给客户添加完资料,都会发现图片都变形了。想要给网页中所有的图片都创建相同尺寸的缩略图并不是一件容易的事,但如果将图片尺寸告诉给客户,让他们下次上传缩略图的时候,都按照网页上图片尺寸来作图,这往往不是一件现实的事情。毕竟不是每个客户都有大把时间来一个个处理。当然,若果有个相当强大的后台程序或者是靠谱的软件,那也是能省事不少。不过,手里现有的后台程序没有这种功能,所有苏州网站建设在网上找了一个很不错的jQThumb – jQuery缩略图插件,它能够很方便的制作指定的尺寸的缩略图。



  jQThumb兼容所有浏览器,包括IE6。在高级浏览器中使用背景方式实现,并设置图片的尺寸(background-size)和位置(background-position)实现居中;在IE6等老旧的浏览器中使用图片的方式实现,并使用绝对定位和margin实现居中。


$(function(){
	$('.pic').each(function(index, element) {
		// console.log(element);
		// var picDiv = $(this).find('.pic');
		var picDiv = $(this),
			getWidth = picDiv.width(),
			getHeight = picDiv.height(),
			bgSize = 'cover';
		if($(this).hasClass('contain')){
			bgSize = 'contain';
		}

		$(this).find('img').jqthumb({
			width: getWidth,
			height: getHeight,
			after: function(imgObj){
			    imgObj.css('opacity', 0).animate({opacity: 1}, 2000);
			}
		});
	});
});


属性/方法类型默认值说明
classname
‘jqthumb’缩略图容器的 class
width整数100缩略图的宽度,单位为 px
height整数100缩略图的高度,单位为 px
position
{top:’50%’, left:’50%’}缩略图的位置,默认为 50%,即水平并且垂直居中
source字符串‘src’指定图像源属性,默认为 src
showoncomplete布尔值true处理后时候立即显示,如果为 false 则不自动显示,需要额外设置让它显示,比如使用回调函数 after、done
before函数
处理前的回调函数
after函数
某一个图片处理后的回调函数
done函数
所有图片处理后的回调函数


技术分享

苏南名片

  • 电话:180-0154-0762
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2020 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号