前言

因为之前库房合作的时候交给我一个任务，就是在点击某一项物品的时候显示出几张相印的小图片，然后点击小图片之后显示出一张大图片，因为当时还没有接触JavaScript，所以这方面的知识不是很了解，一直拖着，大概有两天吧，是在是解决不了，于是将这个任务交给了老付和建华，今天在学习JavaScript的时候突然之后就看到了有这么一项功能，于是就有感而发。

内容

首先向大家展示代码。
这部分是HTML的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>美术馆</title>
    <script type="text/javascript" src="script.js"></script>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
    <!--只需要一个图片的列表-->
    <ul id="navigator">
        <li><a href="./img/01.jpg" title="01"><img src="small_img/01.jpg" /></a></li>
        <li><a href="./img/02.jpg" title="02"><img src="small_img/02.jpg" /></a></li>
        <li><a href="./img/03.jpg" title="03"><img src="small_img/03.jpg" /></a></li>
        <li><a href="./img/04.jpg" title="04"><img src="small_img/04.jpg" /></a></li>
        <li><a href="./img/05.jpg" title="05"><img src="small_img/05.jpg" /></a></li>
        <li><a href="./img/06.jpg" title="06"><img src="small_img/06.jpg" /></a></li>
        <li><a href="./img/07.jpg" title="07"><img src="small_img/07.jpg" /></a></li>
        <li><a href="./img/08.jpg" title="08"><img src="small_img/08.jpg" /></a></li>
        <li><a href="./img/09.jpg" title="09"><img src="small_img/09.jpg" /></a></li>
        <li><a href="./img/10.jpg" title="10"><img src="small_img/10.jpg" /></a></li>
        <li><a href="./img/11.jpg" title="11"><img src="small_img/11.jpg" /></a></li>
        <li><a href="./img/12.jpg" title="12"><img src="small_img/12.jpg" /></a></li>
        <li><a href="./img/13.jpg" title="13"><img src="small_img/13.jpg" /></a></li>
    </ul>
</body>
</html>

这部分是Script.js中的代码：

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";
    //创建图片节点
    var img = c("img");
    img.src = "./img/face.JPG";
    divContainer.appendChild(img)
    //创建文本节点
    var p = c("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;

            p.innerHTML = txt;
            img.src = url;
            return false;
        }
    }
}

这部分是css中的代码

#navigator li{
    float:left;
    list-style-type:none;
    margin-right:3px;
}
#navigator{
    width:700px;
    margin:0 auto;
}
.clear{
    clear:both;  
}
.center{
    width:700px;
    margin:0 auto;
}

在敲css的时候，视频中给出的#navigator和.center并列，即将如上的代码写成如下方式：

#navigator li{
    float:left;
    list-style-type:none;
    margin-right:3px;
}
#navigator .center{
    width:700px;
    margin:0 auto;
}
.clear{
    clear:both;  
}

我照着这样做的时候发现不能正常运行，即css样式无法成功写入到html中去，所以我取消的并列的样式，而是分开写入。
运行的结果如下：
这里写图片描述
因为我在js中使用了onmouseover属性，所以在鼠标移动到小图上的时候图片自动放大。

js--HTML美术馆

前言

内容

猜你喜欢