JavaScript写的图片库功能（小图变大图查看浏览）

来源：互联网发布：iphone手机称重软件编辑：程序博客网时间：2024/04/24 09:33

图片库

期望：

当点击小图时，能留在这个页面而不是转到另一个窗口；
当点击小图时，能够在本页面的下面大图显示；
当点击小图时，在大图的下面能够显示图片的相关信息。

最终实现效果：

---------------------------------------------------------------------------------------------------------------------------------------------------------

代码实现

<!DOCTYPE html><html><head>    <meta charset=utf-8>    <title>图片库</title>    <link rel="stylesheet" type="text/css" href="./../styles/showPic.css"></head><body>    <h1>图片库</h1>    <ul id="imageallery">        <li>            <a href="./../images/11.jpg" onclick="showPic(this); return false;" title="狗狗">狗狗</a>        </li>        <li>            <a href="./../images/22.jpg" onclick="showPic(this); return false;" title="花朵">花朵</a>        </li>        <li>            <a href="./../images/a.jpg" onclick="showPic(this); return false;" title="手套">手套</a>        </li>        <li>            <a href="./../images/border.png" onclick="showPic(this); return false;" title="边框">边框</a>        </li>    </ul>    <img id="placeholder" src="./../images/b.jpg" alt="my image">    <p id="description">chooese an image</p>    <script src="./../javascripts/showPic.js"></script></body></html>

function prepareGallery() {    if (!document.getElementsByTagName) return false;    if (!document.getElementById) return false;    if (!document.getElementById('imageallery')) return false;    var gallery = document.getElementById('imageallery');    var links = gallery.getElementsByTagName('a');    for (var i = 0; i < links.length; i++) {        links[i].onclick = function() {            return !showPic(this);        }    };}function showPic(whichpic) {    if (!document.getElementById('placeholder')) return false;    var source = whichpic.getAttribute("href");    var placeholder = document.getElementById('placeholder');    // 检查placeholder元素是否存在    if (placeholder.nodeName != "IMG") return false;    placeholder.setAttribute("src", source);    if (document.getElementById('description')) {        var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";        var description = document.getElementById("description");        if (description.firstChild.nodeType == 3) {            description.firstChild.nodeValue = text;        }    }    return false;}

CSS部分：

body{font-family: "Helvetica","Arial",serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1{color: #333;background-color: transparent;}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;}#placeholder{width: 300px;height: 300px;}

1 0