<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<img name="a" src="imgs/index-banner.png">
<img name="b" src="imgs/MORE.png">
<script>
var flag = true,//狀態true為正常的狀態,false為放大的狀態
imgH,//圖片的高度
imgW,//圖片的寬度
imga = document.getElementsByName("a")[0];//圖片元素
imgb = document.getElementsByName("b")[0];//圖片元素
b.onclick = function(){
//圖片點擊事件
imgH = imga.height; //獲取圖片的高度
imgW = imga.width; //獲取圖片的寬度
if(flag){
//圖片為正常狀態,設置圖片寬高為現在寬高的2倍
flag = false;//把狀態設為放大狀態
imga.height = imgH*2;
imga.width = imgW*2;
}else{
//圖片為放大狀態,設置圖片寬高為現在寬高的二分之一
flag = true;//把狀態設為正常狀態
imga.height = imgH/2;
imga.width = imgW/2;
}
}
</script>
</body>
</html>