之前用样式表,超出部分隐藏的方法实现缩略图效果,有时候会产生图片被切掉半个脑袋的情况。这里谈一下用JS按比例制作缩略图的方法:

将以下JS代码放到Head区,然后在Body标签中加入onload=”ReImgSize”进行调用;

function ReImgSize(){
var await=document.getElementById(“Imgbox”);//定义要改变的图片的容器ID
var imgall=await.getElementsByTagName(“img”);//取得容器内所有的IMG标签
for (i=0;i500) //如果图片的宽度大于500
{
var oWidth=imgall[i].width; //取得图片的实际宽度
var oHeight=imgall[i].height; //取得图片的实际高度
imgall[i].width=”500″; //重设图片的宽度为500
imgall[i].height=oHeight*500/oWidth; //重设图片的高度
}
}
}

另外,我们可以使用jQuery插件来实现在按比例缩放图片大小的同时,实现图片的预加载:
下载演示文件