有时候我们需要控制图片的大小不超过容器的指定宽度,这时我们就需要用jQuery来完成对图片大小的等比例缩小显示,且能点击再放大。我们可以把 ResizeImage(this,520); 这段代码放在img元素的onclick中,再把下面代码放入你的js文件中,就可以实现了。
调用方法:
ResizeImage(this,520);
代码如下:
//*********************************************************
// 目的: 图片自动缩小 点击放大
// 输入: 无
// 返回: 无
//*********************************************************
function ResizeImage(objImage,maxWidth) {
try{
if(maxWidth>0){
var objImg = $(objImage);
if ( objImg.width() > maxWidth ) {
var oldwidth = objImg.width();
var oldheight = objImg.height();
var newheight = maxWidth / oldwidth * oldheight;
objImg.css( { width:maxWidth+"px", height:newheight+"px", cursor:"pointer" } );
objImg.attr( "title", "点击查看原图" );
objImg.click(function(){ window.open( $(this).attr("src") ); });
}
}
}catch(e){};
}
如果你要对指定容器内所有图片都等比例缩小,可以参照下面的代码:
$(function() {
$(".dvcontent img").each(function() {
var maxwidth = 520;
if ($(this).width() > maxwidth) {
var oldwidth = $(this).width();
var oldheight = $(this).height();
var newheight = maxwidth/oldwidth*oldheight;
$(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"});
$(this).attr("title","点击查看原图");
$(this).click(function(){window.open($(this).attr("src"))});
}
});
});