：图片库

Posted 2020-06-29 故事情结

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了：图片库相关的知识，希望对你有一定的参考价值。

首先先建立一个html文件，建立一个图片库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习日记</title>
</head>

<body>
<h1>hello picture</h1>
<ul>
    <li>
    <a href="images/guitar.jpg" title="one guitar">guitar</a>
    </li>
    <li>
    <a href="images/back.jpg" title="boy‘back">back</a>
    </li>
    <li>
    <a href="images/hair.jpg" title="girl‘hair">hair</a>
    </li>
    <li>
    <a href="images/beautiful.jpg" title="a beautiful girl">beautiful</a>
    </li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />

</body>
</html>

然后写一个函数，用来更换图片，查看图片时，浏览器默认的默认查看行为是在一个新的窗口打开这张图片，而我们的目的是在一个页面实现对图片的更换，所以我们要取消这种默认行为。

代码更改如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习日记</title>
</head>

<body>
<h1>hello picture</h1>
<ul>
    <li>
    <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>
    </li>
    <li>
    <a href="images/back.jpg" title="boy‘back" onclick="showpic(this);return false">back</a>
    </li>
    <li>
    <a href="images/hair.jpg" title="girl‘hair" onclick="showpic(this);return false">hair</a>
    </li>
    <li>
    <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>
    </li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />

<script>
function showpic(whichpic){
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
}
</script>
</body>
</html>

这样即实现了查看图片在同一个页面。

界限来介绍几种常用的属性

1.nodeValue属性：它用来得到或者设置一个节点的值

2.childNodes属性：用来获取一个元素的所有子元素

3.nodeType属性：

元素节点的nodeType属性值是1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

4.firstChild属性：相当于childNodes[0]

5.lastChild属性：相当于childNodes[chlidNodes.length-1]

接下来我们运用以上属性来获取图片的描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习日记</title>
<style type="text/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;
}
</style>
</head>

<body>
<h1>hello picture</h1>
<ul>
    <li>
    <a href="images/guitar.jpg" title="one guitar" onclick="showpic(this);return false">guitar</a>
    </li>
    <li>
    <a href="images/back.jpg" title="boy‘back" onclick="showpic(this);return false">back</a>
    </li>
    <li>
    <a href="images/hair.jpg" title="girl‘hair" onclick="showpic(this);return false">hair</a>
    </li>
    <li>
    <a href="images/beautiful.jpg" title="a beautiful girl" onclick="showpic(this);return false">beautiful</a>
    </li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="discription">选择一张图片</p>

<script>
function showpic(whichpic){
    var source=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text=whichpic.getAttribute("title");
    var discription=document.getElementById("discription");
    discription.firstChild.nodeValue=text;
}
</script>
</body>
</html>

为其添加样式，并获取到了图片的详细信息。图片的详细信息就是li元素的title属性，p元素的

firstChild值为“选择一张图片”，是一个文本节点。

以上是关于：图片库的主要内容，如果未能解决你的问题，请参考以下文章

Swift新async/await并发中利用Task防止指定代码片段执行的数据竞争(Data Race)问题

Python练习册第 0013 题：用 Python 写一个爬图片的程序，爬这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)(代码片段

Android - 应用程序启动时片段 onCreate 崩溃

可以直接拿来用的15个jQuery代码片段

在这个 spark 代码片段中 ordering.by 是啥意思？