前言:下面我们接着旅程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>