Today, along with knock some of the effects js
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>关闭小广告</title> 5 <style type="text/css"> 6 .box{ 7 margin: 0 auto; 8 width: 258px; 9 } 10 #icon{ 11 position: absolute; 12 width: 258px; 13 } 14 #close{ 15 position: relative; 16 top: 0; 17 width: 40px; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="box"> 23 <img id="icon" src="../img/img-02.jpg" width="258"> 24 <img id="close" src="../img/img-close.jpg" width="40"> 25 </div> 26 27 <script type="text/javascript"> 28 window.onload = function(ab){ 29 //1.获取关闭标签 30 var close = document.getElementById("close"); close.onclick =33 is2. Click the monitor//3231 is function () { 34 console.log ( "use Close" ); 35 // put his sibling pictures to remove the 36 the this .parentNode.remove; 37 // The second method seems to be more safer 38 the this . = parentNode.style.display "none" ; 39 } 40 } 41 is </ Script> 42 is </ body> 43 is </ HTML>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>图片相册</title> 5 <style type="text/css"> 6 *{margin: 0;padding: 0;} 7 #box{margin: 0 auto;width: 500px;height: 500px;} 8 #text{margin: 0;color: blue;} 9 #big_img{width: 300px;} 10 #pic li{float: left;margin-right: 10px;height: : 200px;} 11 #pic img{height: 80px;} 12 </style> 13 </head> 14 <body> 15 <div ID = "Box"> 16 <-! Enlarge Description -> . 17 <P ID = "text"> Dandelion </ P> 18 is <-! Big Picture Show -> . 19 <IMG ID = "big_img" the src = "../ IMG / IMG-02.jpg"> 20 is <-! thumbnail listing -> 21 is <UL ID = "PIC"> 22 is <Li> 23 is <A the href = ".. /img/img-02.jpg "title =" landscape "> 24 <IMG the src =" ../ IMG / IMG-02.jpg "> 25 </a> 26 is </ Li> 27 <Li> 28 < a href="../img/img-03.jpg" title="花"> 29 <img src="../img/img-03.jpg"> 30 </a> 31 </li> 32 </ul> 33 </div> 34 35 <script type="text/javascript"> 36 window.onload = function(ab){ 37 //1.获取需要的标签 38 var text = document.getElementById("text"); 39 var big_img = document.getElementById("big_img"); 40 var pic = document.getElementById("pic"); 41 var aLists = pic.getElementsByTagName("a"); 442. The event binding//4342 for(var i = 0; i<aLists.length; i++){ 45 var a =aLists[i]; 46 a.onclick =function (ab1){ 47 text.innerText = this.title; 48 big_img.setAttribute("src",this.href); 49 return false; 50 } 51 } 52 } 53 </script> 54 </body> 55 </html>