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

最新推荐文章于 2022-06-17 09:17:35 发布

香雪儿sofia

最新推荐文章于 2022-06-17 09:17:35 发布

阅读量991

点赞数 2

分类专栏： JavaScript+DOM编程 JS小功能文章标签： javascript html 图片库图片浏览

本文链接：https://blog.csdn.net/sofia92/article/details/50160847

版权

JavaScript+DOM编程同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

JS小功能

4 篇文章 0 订阅

订阅专栏

图片库

期望：

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

最终实现效果：

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

代码实现

<!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" οnclick="showPic(this); return false;" title="狗狗">狗狗</a>
        </li>
        <li>
            <a href="./../images/22.jpg" οnclick="showPic(this); return false;" title="花朵">花朵</a>
        </li>
        <li>
            <a href="./../images/a.jpg" οnclick="showPic(this); return false;" title="手套">手套</a>
        </li>
        <li>
            <a href="./../images/border.png" οnclick="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;
}

香雪儿sofia

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript写的图片库功能（小图变大图查看浏览）

图片库期望：当点击小图时，能留在这个页面而不是转到另一个窗口；当点击小图时，能够在本页面的下面大图显示；当点击小图时，在大图的下面能够显示图片的相关信息。最终实现效果：--------------------------------------------------------------------------------------------
复制链接

扫一扫