Record my journey 7 JavaScript Dom Study Notes

Next we will go on journey 6 to continue our JavaScript Dom journey 7. In this blog, we mainly made a few practical cases to practice the control layer, so that we can better understand this knowledge point, and these cases are basically used on the website, for example, when we log on to a single machine, we did not jump to the page, but showed a layer-by-layer login method on the page, and the effect of the big picture was not visible in small pictures.

1. Control Layer exercises

(1) Exercise 1: Click the [Login] button to bring up a layer showing the user name and password, and write the user name and password into a layer. The layer is hidden by default, click the logon hyperlink to display the layer. If you click the close button in the layer, the layer is hidden.

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 () "> logon </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  26 27 <table> 28 29 <tr> 30 31 <td> <label for =" username "> User Name: </label> </td> 32 33 <td> <input type = "text" id = "username"/> </td> 34 35 </tr> 36 37 <tr> 38 39 <td> <label for = "password"> password: </label> </td> 40 41 <td> <input type = "text" id = "password"/> </td> 42 43 </tr> 44 45 </table> 46 47 </div>

 

(2) Exercise 2: click on a thumbnail to display the large image corresponding to the thumbnail at the position of a layer and the name, height, and other information, click the close button in the layer to close the layer. Advanced: displays the extra attributes of an element.

<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>  <div style =" display: none; position: absolute; "id =" details ">  <p> Han Yinglong </p> <p> Kencery </p> <input type =" button" value = "Disable" onclick = "hideDetails () "/> </p> </div>

 

2) the code for dynamic implementation of this effect is as follows:

1 <script type = "text/javascript"> 2 3 var data = {".. /images/00_00small.jpg ":[".. /images/00_00.jpg "," Han Yinglong "," 180 "], 4 5 ".. /images/00_01small.jpg ":[".. /images/00_01.jpg "," blog Garden "," 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): adds a new attribute with the specified name and value, or sets an existing attribute as the specified 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  66 67 <p id =" detailHeight "> </p> <p id = ""detailName"> </p> 68 69 <p> <input type = "button" value = "close" onclick = "hideDetails () "/> </p> 70 71 </div> 72 73 </body>