記錄我的旅程7之JavaScript Dom學習筆記

前言:下面我們接著旅程6繼續我們的JavaScript Dom征程7。這篇部落格我們主要做了幾個很實用的小案例來練習一下控制層，使我們能夠更加的瞭解這個知識點，而且這些案例都是網站上面基本用的到，比如當我們單機登入的時候不是跳轉頁面，而是在本頁面上面浮出一個層的登入方式，還有小圖片看不清看大圖片的效果等等。

1. 控制層的練習

(1)    練習1：點擊【登入】按鈕，彈出一個顯示使用者名稱，密碼的層，將使用者名稱，密碼等寫入一個層中，層預設是隱藏的，點擊【登入】超連結以後將層顯示出來，如果點擊層中的關閉按鈕，則隱藏層。

 1   <script type="text/javascript"> 2  3         function showLogin() { 4  5             var loginDiv = document.getElementById("LoginDiv"); 6  7             loginDiv.style.display = ''; 8  9         }10 11         function hideLogin() {12 13             var loginDiv = document.getElementById("LoginDiv");14 15             loginDiv.style.display = 'none';16 17         }18 19     </script>20 21     <a href="javascript:showLogin()">登入</a>22 23     <div style="position:absolute; top:220px; left:500px; border-style:solid; border-color:Blue; border-width:thin; display:none" id="LoginDiv">24 25         <img src="../images/close.png" alt="關閉" onclick="hideLogin()" style="float:right" />26 27         <table>28 29             <tr>30 31                 <td><label for="username">使用者名稱：</label></td>32 33                 <td><input type="text" id="username" /></td>34 35             </tr>36 37             <tr>38 39                 <td><label for="password">密 碼：</label></td>40 41                 <td><input type="text" id="password" /></td>42 43             </tr>44 45         </table>46 47     </div>

 

  

(2)    練習2：一副圖片，點擊小圖，彈出一個層再點擊的位置顯示小圖對應的大圖，並且顯示姓名，身高等資訊，點擊層中的關閉按鈕關閉層。進階：元素的額外屬性，動畫效果顯示出來。

  

  <script type="text/javascript">        function showDetails() {            var details = document.getElementById("details");            details.style.display = '';            details.style.left = window.event.clientX;            details.style.top = window.event.clientY;        }        function hideDetails() {            var details = document.getElementById("details");            details.style.display = 'none';        }    </script>    <img src="../images/00_01small.jpg" alt="美麗" onmouseover="showDetails()" />    <div style="display:none; position:absolute;" id="details">        <img src="../images/00_01.jpg" alt="美麗大圖" /><p>韓迎龍</p><p>Kencery</p>        <p><input type="button" value="關閉" onclick="hideDetails()" /></p></div>

 

   2)動態實現這種效果實現的代碼如下:

   

 1 <script type="text/javascript"> 2  3         var data = { "../images/00_00small.jpg": ["../images/00_00.jpg", "韓迎龍", "180"], 4  5             "../images/00_01small.jpg": ["../images/00_01.jpg", "部落格園", "170"], 6  7             "../images/00_02small.jpg": ["../images/00_02.jpg", "CSDN", "175"] 8  9         };10 11             function loadImg() {12 13                 for (var smallImgPath in data) {14 15                     var smallImg = document.createElement("img");16 17                     smallImg.src = smallImgPath;18 19                     //setAttribute(string name, string value)：增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。20 21                     smallImg.setAttribute("a1", data[smallImgPath][0]);22 23                     smallImg.setAttribute("a2", data[smallImgPath][1]);24 25                     smallImg.setAttribute("a3", data[smallImgPath][2]);26 27                     smallImg.onmouseover = function () {28 29                         document.getElementById("detailImg").src = this.getAttribute("a1");30 31                         document.getElementById("detailHeight").innerHTML = this.getAttribute("a2");32 33                         document.getElementById("detailName").innerHTML = this.getAttribute("a3");34 35                         var details = document.getElementById("details");36 37                         details.style.top = window.event.clientY;38 39                         details.style.left = window.event.clientY;40 41                         details.style.display = '';42 43                     };44 45                     document.body.appendChild(smallImg);46 47                 }48 49             }50 51             function hideDetails() {52 53                 var details = document.getElementById("details");54 55                 details.style.display = 'none';56 57             }58 59     </script>60 61 <body onload="loadImg()">62 63     <div style="position:absolute; display:none;" id="details">64 65         <img id="detailImg" src="" />66 67         <p id="detailHeight"></p><p id="detailName"></p>68 69         <p><input type="button" value="關閉" onclick="hideDetails()" /></p>70 71     </div>72 73 </body>