美术馆案例


通过一整天的学习，终于将美术馆的案例自己亲自敲出来。

先将代码粘贴上来

 

Default:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>美术馆</title>
 6 <link type="text/css" rel="stylesheet" href="style.css"/>
 7 <script type="text/javascript" src="jslib.js"></script>
 8 <script type="text/javascript" src="jsload.js"></script>
 9 <script type="text/javascript" src="container.js"></script>
10 <script type="text/javascript" src="addClick.js"></script>
11 <script type="text/javascript" src="show.js"></script>
12 <body>
13    <ul id="nav">
14        <li><a href="img/01.jpg"><img src="small_img/01.jpg" title="11"/></a></li>
15        <li><a href="img/02.jpg"><img src="small_img/02.jpg" title="22"/></a></li>
16        <li><a href="img/03.jpg"><img src="small_img/03.jpg" title="33"/></a></li>
17        <li><a href="img/04.jpg"><img src="small_img/04.jpg" title="44"/></a></li>
18        <li><a href="img/05.jpg"><img src="small_img/05.jpg" title="55"/></a></li>
19        <li><a href="img/06.jpg"><img src="small_img/06.jpg" title="66"/></a></li>
20        <li><a href="img/07.jpg"><img src="small_img/07.jpg" title="77"/></a></li>    
21    </ul>
22 </body>
23 </html>


CSS:

1   *{margin:0px;padding:0px}
2   #nav{
3        width:750px;
4        margin:5px auto;}
5      #nav li{
6       list-style-type:none;
7       float:left;
8       margin-right:10px;}


Jslib:

 1 var c = function(tag){
 2     return document.createElement(tag);
 3     };
 4 var g =function(selector,node){
 5     var r = /#(.+)/;
 6     var m =r.exec(selector);
 7     //r.exec匹配的结果集是一个Array数组 数组[0]=匹配本身 [1]="()"中的内容
 8     //判断m[1] 表示正则表达式匹配到的第一个索引值
 9     if(m){
10         //返回id
11         //
12         return document.getElementById(m[1]);
13     }else{
14          //这里用了逻辑或运算符
15          node = node || document;
16          
17          return node.getElementsByTagName(selector);    
18       }
19     };

 

Jsload:

 1 var jsload =function(func){
 2     var oldFunc =onload;
 3     if(typeof oldFunc === "function"){
 4         onload = function(){
 5          oldFunc();
 6          func();
 7          };
 8         }else
 9         {
10             onload =func;
11         }
12     
13     };

Container:

 1     var container = function(){
 2     var div = c("div");
 3     var img = c("img");
 4     img.id="pic";
 5     img.src ="img/face.jpg";
 6     div.appendChild(img);
 7     var p = c("p");
 8     p.id ="txt";
 9     p.innerHTML ="请点击这里上传照片";*/
10     
11     //声明了一个大容器，主要用来布局，将之前放图片的div与文字p都装在这个容器中
12     //这样返回的就是大容器一个值
13     var divContainer = c("div");
14     divContainer.style.textAlign="center";
15     divContainer.style.clear ="both";
16     divContainer.appendChild(div);
17     divContainer.appendChild(p);
18     return divContainer;
19     };

addClick:

 1 var addClick = function(){
 2     var ul = g("#nav");
 3     var list = g("a",ul);
 4     for(var i=0;i<list.length;i++){
 5         
 6         list[i].onclick = function(){
 7         
 8                 var url = this.href;
 9                 //txt代表图片的title文字
10                 //g("img",this)返回的是一个集合 [0]代表取集合中第一个元素
11                 var txt =g("img",this)[0].title;
12                 g("#pic").src=url;
13                 g("#txt").innerHTML =txt;
14                 return false;
15         };
16         
17       }
18       
19     };

Show:

1 jsload(function(){
2     var div = container();
3     addClick();
4     var body =g("body");
5     body[0].appendChild(div);
6     });

 

 

美术馆的案例是个经典的案例，运用到了dom的技术，页面分离js ,css的技术

1.引用js的代码有顺序之分

2.window.onload事件是在页面加载完毕后执行，如若未添加，之前为null。

3.在写到<a>标签的时候忘了写</a>，导致浪费了很长世间调错 （粗心）

4.

posted on 2014-11-18 02:03  蜗牛阿布  阅读(292)  评论(0)    收藏  举报

导航