需求:
HTML中有三張圖片:
如果圖片處於“大”狀態,則點擊圖片可以縮小。
如果圖片處於“小”狀態,則點擊圖片可以放大。
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>改變圖片</title>
<script src="js/jquery-1.11.1.js"></script>
<script>
function chg(e) {
var $img = $(e.srcElement || e.target); //添加對 IE的支持,並封裝爲JQuery對象
if($img.attr("class")!="pic")
return;
if($img.width()==218) { //根據圖片大小調整
$img.width("250px");
$img.height("250px");
} else {
$img.width("218px");
$img.height("218px");
}
}
</script>
</head>
<body>
<div id="imgs" οnclick="chg(event);"> <!--通過事件冒泡機制處理div中的圖片-->
<img src="img/01.jpg" class="pic"/>
<img src="img/02.jpg" class="pic"/>
<img src="img/03.jpg" class="pic"/>
</div>
</body>
</html>