【JavaScript】——美术馆

HTML、css和js的完美集合，实现的功能虽然小，但是五脏俱全，为我以后的前端树立经典的榜样，下面我来接下一下这里的代码

 

HTML 主要作用是展现页面，这里引用了js和css样式，与HTML控件协作完成美术馆的功能。

css样式

定义了HTML控件的样式

#navigatorli {

       float:left;

       list-style-type:none;

       margin-right:10px;

}

#navigator,.center {

       width:650px;

       margin:0 auto;

}
.clear {
       clear:both;
}

Js在这里充当了老大的角色，功能都是在这里实现的，它像c# 一样可以通过带有参数的方法来实现功能，还可以节点“嵌套”节点，真是厉害了

经典的点击事件里面用到了for循环,尤其是this的使用，大大简化了代码，this在不同的环境下有不同的含义，稍后会和大家详细说明

 

var c =function(tag) {

       return document.createElement(tag);

};

 

var gets= function(tag, pNode) {

       pNode = pNode || document;

       return pNode.getElementsByTagName(tag);

};

 

var get= function(id) {

       return document.getElementById(id);

};

 

onload =function() {

       // 创建节点

       // 创建什么节点？

       // div去除浮动、图片、文本

       var div = c("div");

      

      

      

      

       div.className = "clear";

       var body = gets("body")[0];

       body.appendChild(div);

      

      

       // 创建容器div

       var divContainer = c("div");

       // divContainer.className ="center";

       divContainer.style.textAlign ="center";

      

       //divContainer.style.backgroundImage="url(img/1.jpg)";

       //divContainer.style.backgroundRepeat="repeat-x";

      

       // 创建图片

       var img = c("img");

       img.id = "img";

       img.src = "./img/face.jpg";

       divContainer.appendChild(img);

      

       // 创建文本

       var p = c("p");

       p.id = "p";

       p.innerHTML = "请选择图片";

      

       divContainer.appendChild(p);

      

       body.appendChild(divContainer);

      

      

       // 添加事件

       var links = gets("a",get("navigator"))

       for(var i = 0; i < links.length; i++){

      

              links[i].onclick = function() {

              // links[i].onmouseover =function() {

                     // a标签就是this

                     var txt = this.title;

                     var url = this.href;

                    

                     //alert(links.length);

                     //alert(i);

                    

                     get("p").innerHTML= txt;

                     get("img").src =url;

                     return false;

              };

      

       /*

              // 使用闭包

              links[i].onclick = (function(i) {

                     return function() {

                                   // a标签就是this

                                   var txt =links[i].title;

                                   var url =links[i].href;

                                  

                                  

                                   get("p").innerHTML= txt;

                                   get("img").src= url;

                                   return false;

                            }

                     })(i);

       */

       }

      

};