图片库-V1

图片库-V1,很简单,大概看了下,书后面会不断改进此图片库

图片库-V1_第1张图片

用firebug CSS源代码编辑器直接编写CSS代码太方便了!所写即所得,且代码提示功能很好用,效率明显提升!

图片库-V1_第2张图片

node.childNodes[0]===node.firstChild

node.childNodes[node.childNodes.length-1]===node.lastChild

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li><a href="images/1.jpg" onclick="showPic(this);return false;" title="A flag display">flag</a></li>
        <li><a href="images/2.jpg" onclick="showPic(this);return false;" title="A ocean display">ocean</a></li>
        <li><a href="images/3.jpg" onclick="showPic(this);return false;" title="A butterfly display">butterfly</a></li>
        <li><a href="images/4.jpg" onclick="showPic(this);return false;" title="A diamond display">diamond</a></li>
    </ul>
    <img id="placeholder" src="images/blank.jpg" alt="my image gallery" />
    <p id="description">Choose an image</p>
    <script type="text/javascript" src="js/showPic.js"></script>
</body>
</html>
body {
    font-family: Helvetica,Arial,serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}
a {
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
ul {
    padding: 0;
}
li {
    float: left;
    padding: 1em;
    list-style: none;
}
img {
    display: block;
    clear: both;
}
p {
    font-weight: bold;
    color: #333;
}
function showPic(whichpic){
        var source=whichpic.getAttribute("href");
        var placeholder=document.getElementById("placeholder");
        placeholder.setAttribute("src",source)//(推荐此种,DOM1级可适用于web浏览器以外的应用环境)||placeholder.src=source;
        var text=whichpic.getAttribute("title");
        var description=document.getElementById("description");
        description.firstChild.nodeValue=text;
    }


你可能感兴趣的:(图片库-V1)