记录我的旅程7之JavaScript Dom学习笔记

前言:下面我们接着旅程6继续我们的JavaScript Dom征程7。这篇博客我们主要做了几个很实用的小案例来练习一下控制层，使我们能够更加的了解这个知识点，而且这些案例都是网站上面基本用的到，比如当我们单机登录的时候不是跳转页面，而是在本页面上面浮出一个层的登录方式，还有小图片看不清看大图片的效果等等。

控制层的练习

(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-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>