您的位置：首页 > Web前端 > JQuery

jQuery——小案例：点击图片放大缩小

2016-04-07 23:32 501 查看
需求：

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" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航