jQuery——小案例:點擊圖片放大縮小

需求:

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>

發佈了42 篇原創文章 · 獲贊 3 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章