美女相冊案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial" ...
美女相冊案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </style> <script src="../jquery-1.12.4.js"></script> <script> // $(function () { // //1. 給所有的a註冊點擊事件 $(function () { //給所有a註冊點擊事件 $("#imagegallery a").click(function () { //獲取當前a的href屬性 （a是個大圖，裡面包了小圖） var href = $(this).attr("href"); //點擊a的時候，改變下麵大框的圖片的屬性src ，值就用當前a的href $("#image").attr("src", href); //點擊a的時候，改變文字框的title屬性，值就用當前a的title var title = $(this).attr("title"); $("#des").text(title); return false; }) }) </script> </head> <body> <h2> 美女畫廊 </h2> <ul id="imagegallery"> <li><a href="images/1.jpg" title="美女A"> <img src="images/1-small.jpg" width="100" alt="美女1" /> </a></li> <li><a href="images/2.jpg" title="美女B"> <img src="images/2-small.jpg" width="100" alt="美女2" /> </a></li> <li><a href="images/3.jpg" title="美女C"> <img src="images/3-small.jpg" width="100" alt="美女3" /> </a></li> <li><a href="images/4.jpg" title="美女D"> <img src="images/4-small.jpg" width="100" alt="美女4" /> </a></li> </ul> <div style="clear:both"></div> <img id="image" src="images/placeholder.png" alt="" width="450px" /> <p id="des">選擇一個圖片</p> </body> </html>
