<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>显示缩略图</title>
</head>
<script type="text/javascript">
//显示缩略图
function DrawImage(ImgD, width_s, height_s) {
/*var width_s=139
var height_s=104
*/
var image = new Image()
image.src = ImgD.src
if (image.width >0 &&image.height >0) {
flag = true
if (image.width / image.height >= width_s / height_s) {
if (image.width >width_s) {
ImgD.width = width_s
ImgD.height = (image.height * width_s) / image.width
} else {
ImgD.width = image.width
ImgD.height = image.height
}
} else {
if (image.height >height_s) {
ImgD.height = height_s
ImgD.width = (image.width * height_s) / image.height
} else {
ImgD.width = image.width
ImgD.height = image.height
}
}
}
/*else{
ImgD.src=""
ImgD.alt=""
}*/
}
</script>
</head>
<body>
<div>
<div>
<div>
<img src="D:\\02.9.3.3\1.jpg" align="center"
onclick="DrawImage(this,200,200)" alt="点击我！">
</div>
</div>
</div>
</body>
</html>
所谓的缩略图其实就是设置了一个长宽小点的<img>去存放这张图片，在<img>的点击事件中再去更改它的长宽达到放大效果，当然这样可能会打乱页面布局，所以你可以做成像QQ空间那样，点击图片后利用遮罩层显示放大的图片。先设置一段JS代码，如：function DrawImage(MyPic,W,H){var flag=false
var image=new Image()
image.src=MyPic.src
if(image.width>0 &&image.height>0){
flag=true
if(image.width/image.height>= W/H){
if(image.width>W){
MyPic.width=W
MyPic.height=(image.height*W)/image.width
}
else{
MyPic.width=image.width
MyPic.height=image.height
}
}
else{
if(image.height>H){
MyPic.height=H
MyPic.width=(image.width*H)/image.height
}
else{
MyPic.width=image.width
MyPic.height=image.height
}
}
}
}
图片读取：<img src="图片路径" onload=""javascript:DrawImage(this,200,120)""border=""0"" width=""200"" height=""120""/>
