一直在给公司官网做 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