记录我的旅程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-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>
初心商城:初心商城
作者:韩迎龙(Kencery) MVC/.NET群:159227188如果您认为这篇文章还不错或者有所收获,您可以通过右边的“打赏”功能 打赏一杯咖啡,本页版权归作者和博客园所有,欢迎转载,但未经作者同意必须保留此段声明, 且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利