js如何显示缩略图和点击放大查看？？？

JavaScript021

js如何显示缩略图和点击放大查看？？？,第1张

所谓的缩略图其实就是设置了一个长宽小点的<img>去存放这张图片，在<img>的点击事件中再去更改它的长宽达到放大效果，当然这样可能会打乱页面布局，所以你可以做成像QQ空间那样，点击图片后利用遮罩层显示放大的图片。

1,按给定的宽和高进行智能缩小

2,按给定的宽和高进行固定缩小(会出现图片变形情况)

3,按给定的宽进行等比例缩小

4,按给定的高进行等比例缩小

5,宽和高按百分比缩小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>