js学习-day011

今天跟着敲一些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");
31 
32         //2.监听点击
33         close.onclick = function(){
34             console.log("close");
35             //把他的兄弟节点图片给移除了
36             this.parentNode.remove;
37             //第二种方法，好像是更加安全一点
38             this.parentNode.style.display = "none";
39         }
40     }
41 </script>
42 </body>
43 </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     <!-- 大图描述 -->
17     <p id="text">蒲公英</p>
18     <!-- 大图展示 -->
19     <img id="big_img" src="../img/img-02.jpg" >
20     <!-- 小图列表 -->
21     <ul id="pic">
22         <li>
23             <a href="../img/img-02.jpg" title="风景">
24                 <img src="../img/img-02.jpg">
25             </a>
26         </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");
42 
43         //2.事件绑定
44         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>

猜你喜欢