jquery插件--------图片自适应容器大小插件

转载 (原文地址) 52weber 随笔 jquery 2k阅读 2011-05-14 13:40:40 举报
<div .="uchome-message-pic"><img src="data/attachment/album/201105/14/134040ntopyz4eht4b5b44.png"><p></p><p>/------------------------------------------------------------------------------</p><p>插件名称:图片自适应容器大小插件</p><p>调用方式:$(selector).resizeImg({w:maxWidth,h:maxHeight});</p><p>QQ:530624206</p><p>时间:2010-05-14</p><p>--------------------------------------------------------------------------------</p><p>/</p><p>(function($){</p><p><span .="Apple-tab-span"> </span> &nbsp;$.fn.extend({</p><p><span .="Apple-tab-span"> </span>resizeImg:function(opt,callback){</p><p><span .="Apple-tab-span"> </span>var defaults={w:200,h:150};</p><p><span .="Apple-tab-span"> </span>var opts = $.extend(defaults, opt);&nbsp;</p><p>&nbsp;<span .="Apple-tab-span"> </span>this.each(function(){</p><p>&nbsp;<span .="Apple-tab-span"> </span> &nbsp; $(this).load(function(){</p><p>&nbsp;<span .="Apple-tab-span"> </span> &nbsp; var imgWidth=this.width,imgHeight=this.height;</p><p>&nbsp;<span .="Apple-tab-span"> </span> &nbsp; if(imgWidth&gt;opts["w"]){</p><p><span .="Apple-tab-span"> </span> &nbsp; this.width=opts["w"];</p><p><span .="Apple-tab-span"> </span> &nbsp; this.height=imgHeight(opts["w"]/imgWidth);</p><p><span .="Apple-tab-span"> </span> &nbsp; imgWidth=opts["w"];</p><p><span .="Apple-tab-span"> </span> &nbsp; imgHeight=this.height;</p><p><span .="Apple-tab-span"> </span> &nbsp; }</p><p><span .="Apple-tab-span"> </span>if(imgHeight&gt;opts["h"]){</p><p><span .="Apple-tab-span"> </span>this.height=opts["h"];</p><p><span .="Apple-tab-span"> </span>this.width=imgWidth(opts["h"]/imgHeight);</p><p><span .="Apple-tab-span"> </span>imgHeight=opts["h"];</p><p><span .="Apple-tab-span"> </span>imgWidth=this.width;</p><p><span .="Apple-tab-span"> </span>} &nbsp;&nbsp;</p><p><span .="Apple-tab-span"> </span>//水平居中,垂直居中<span .="Apple-tab-span"> </span></p><p><span .="Apple-tab-span"> </span>$(this).css({"margin-top":(opts["h"]-imgHeight)/2,"margin-left":(opts["w"]-imgWidth)/2});<span .="Apple-tab-span"> </span> <span .="Apple-tab-span"> </span></p><p><span .="Apple-tab-span"> </span> });&nbsp;</p><p><span .="Apple-tab-span"> </span>});</p><p>&nbsp;<span .="Apple-tab-span"> </span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<span .="Apple-tab-span"> </span> &nbsp;</p><p>&nbsp;<span .="Apple-tab-span"> </span> &nbsp;});</p><p><span .="Apple-tab-span"> </span> &nbsp;</p><p><span .="Apple-tab-span"> </span> &nbsp;})(jQuery);</p><p></p></div>
评论 ( 0 )
最新评论
暂无评论
赶紧努力消灭 0 回复