jQuery——小案例：點選圖片放大縮小
阿新 • • 發佈：2019-02-15
需求：
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>