jquery部份:
//autoImage
;(function($){
$.extend({
“autoImage” : function(options){
options = options || {};
options = $.extend({
“parent” : null,
“loadClassId” : “<img src=’/images/loading.gif’ align=’absmiddle’ />图片载入中…”,
“src” : “”,
“url” : “”,
“alt” : “”
},options);
var parent = options.parent;
if(parent == null || parent.length == 0) return;
parent.addClass(options.loadClassId);
var url = (options.url) ? options.url : options.src;
if(options.src) parent.html(“<a href='”+url+”‘ title='”+options.alt+”‘ target=’_blank’><img alt='”+options.alt+”‘ /></a><br /><div class=’altbig’>”+options.alt+”</div>”);
var image = parent.find(“img”);
var src = (options.src) ? options.src : image.attr(“src”);
var img = new Image();
img.src = src;if(img.complete){
image.attr(“src”,img.src);
parent.removeClass(options.loadClassId);
imgAuto();
return;
}image.attr(“src”,””);
image.hide();
$(img).load(function(){
imgAuto();
image.attr(“src”,this.src);
image.fadeIn(“normal”,function(){
parent.removeClass(options.loadClassId);
});
});function imgAuto(){
var width = img.width;
var height = img.height;
var pwidth = parent.width();
var pheight = parent.height();
if(width>0 && height>0){
var rate = (pwidth/width < pheight/height) ? pwidth/width : pheight/height;
if(rate <= 1){
width *= rate;
height *= rate;
}
var left = (pwidth – width) * 0.5;
var top = (pheight – height) * 0.5;
image.css({
// “margin-left” : left + “px”,
“margin-top” : top + “px”,
“width” : width + “px”,
“height” : height + “px”
});
}
}}
});
$.fn.extend({
“autoImage” : function(src,url,alt,loadClassId){
return this.each(function(){
$.autoImage({
“parent” : $(this),
“src” : src,
“url” : url,
“alt” : alt,
“loadClassId” : loadClassId
});
});
}
});
})(jQuery);
CSS部份:
width: /*设置容器宽度*/
height: /*设置容器高度*/
overflow: hidden;