<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>放大和缩小</title>
<script type="text/javascript">
window.onload = function(){
<!-- 获取图片对象要放在window.onload之中，否则无法获取图片对象；或者将script放在图片之后例如image2 -->
var image = document.getElementById("testImg")
image.onclick = function() {
var width = parseInt(this.width)
if(width == 750) {
this.width = 200
this.height = 180
} else {
this.width = 750
this.height = 536
}
}
}
</script>
</head>
<body>
<img id="testImg" src="../images/2139491297979223579.jpg" width="750" height="536" alt="长江" />
<img id="testImg2" src="../images/7666415_143721636125_2.jpg" width="1024" height="685" alt="黄河" />
<script type="text/javascript">
<!-- 由于页面在加载到此处时，图片已经加载完成，所以不需要放在window.load中 -->
var image2 = document.getElementById("testImg2")
image2.onclick = function() {
var width = parseInt(this.width)
if(width == 1024) {
this.width = 512
this.height = 340
} else {
this.width = 1024
this.height = 685
}
}
</script>
</body>
</html>
用js实现图片点击时放大，再点击恢复的方法：1、页面定义区片区域：
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">
2、定义js方法的mouseover和mouseout事件：
$(document).ready(function () {
$('#Img1, #Img2, #Img3').mouseover(function () {
$(this).animate({ width: "122px", height: "110px" }, 100)
})当鼠标放上去的时候，图片变大
$('#Img1, #Img2, #Img3').mouseout(function () {
$(this).animate({ width: "118px", height: "106px" }, 100)
})当鼠标离开的时候，图片还原为原来的尺寸
})
