用户照片的尺寸自适应

krystic — Mon, 04 May 2009 01:13:17 +0000

一直在给公司官网做 Flash 的照片编辑器, 上线后发现缩略图的问题解决了, 但大图片的尺寸问题又来了, 系统部没有时间修改大图浏览的模板 (5分钟的时间都没有), 只好用 JS 的方不来解决了

尺寸并不是难点, 关键问题是平滑的缩放, IE 7 有一个新增加的独有样式 -ms-interpolation-mode 缩放效果比 Firefox 还要好, 详细说明可以看 MSDN 上的例子. IE 6 只能用率镜了, 没有其他办法. 代码如下:

样式表:

#photo img.autosize {
	width:350px;
	height:300px;
	border:none;
	background:#EDF9E5 url('../public/images/loading3d.gif') 10px 10px no-repeat;-ms-interpolation-mode:bicubic;padding:0px;
}

JS (jQuery):

function resize(width,height,src){
	width=parseInt(width);height=parseInt(height);
	if(width>600){
		height=parseInt(600/width*height)+'px';
		width=600+'px';
	}
	if(jQuery.browser.msie&&jQuery.browser.version=='6.0'){
		$('#photo img.autosize').css({width:width,height:height,
		filter:'progid:DXImageTransform.Microsoft.AlphaImageLoader
		(enabled=true,sizingMethod=scale,src='+src+')'});
	}else{
		$('#photo img.autosize').css({width:width,height:height}).attr('src',src);
	}
	$('#photo .border').css('width',width);
}

$(function(){
	var photo=new Image();
	photo.onload=function(){resize(this.width,this.height,this.src);};
	photo.src='/cb/response/upload/images/playershow/1240545495096.jpg';
});

效果: http://event1.wanmei.com/html/playershow/zhuxian/view/player-267597.htm

抠丁...CODING... » JS

用户照片的尺寸自适应