需求:
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>