526互联

Js精粹 图片库

发布时间 2023-06-15 08:22:57作者: NEKOSAIKOU

使用javascript 实现图片库并优化

基础页面，展示图片

<html>

<body>
 <h1>Snapshots</h1>
 <ul>
     <li>
         <a href="./image/1.jfif" title="A pictureby one">One</a>
     </li>
     <li>
         <a href="./image/2.jfif" title="A pictureby one">Two</a>
     </li>
     <li>
         <a href="./image/3.jfif" title="A pictureby one">Three</a>
     </li>
     <li>
         <a href="./image/4.jfif" title="A pictureby one">Four</a>
     </li>
 </ul>
</body>

</html>

<!-- 

-->

对页面进行修改

❑ 当点击某个链接时，我希望能留在这个网页而不是转到另一个窗口。
❑ 当点击某个链接时，我希望能在这个网页上同时看到那张图片以及原有的图片清单。下面是我为了实现上述目标而需要完成的几项改进。
❑ 通过增加一个“占位符”图片的办法在这个主页上为图片预留一个浏览区域。
❑ 在点击某个链接时，拦截这个网页的默认行为。
❑ 在点击某个链接时，把“占位符”图片替换为与那个链接相对应的图片。

<html>

<body>
 <h1>Snapshots</h1>
 <ul>
     <li>
         <a href="./image/1.jfif" title="A pictureby one">One</a>
     </li>
     <li>
         <a href="./image/2.jfif" title="A pictureby one">Two</a>
     </li>
     <li>
         <a href="./image/3.jfif" title="A pictureby one">Three</a>
     </li>
     <li>
         <a href="./image/4.jfif" title="A pictureby one">Four</a>
     </li>
 </ul>
 <img src="./image/5.jpg" src="./image/5.jpg" alt="">
</body>
<script src="./whichpic.js"></script>

</html>

添加占位图片，在接下来的 js 中操作 dom 来进行属性的修改

// whichpic.js
function showPic(whichpic) {
 var source = whichpic.getAttribute("href"); // 获取whichpic元素节点
 var placeholder = document.getElementById("placeholder");

 placeholder.setAttribute("src", source)
}

动态修改图片的描述

function showPic(whichpic) {
 var source = whichpic.getAttribute("href"); // 获取whichpic元素节点
 var placeholder = document.getElementById("placeholder");
 var text = whichpic.getAttribute("title");
 var description = document.getElementById("description");

 placeholder.setAttribute("src", source);
 description.firstChild.nodeValue = text; // <p>元素本身的nodeValue属性是一个空值，而你真正需要的是<p>元素所包含的文本的值
 // firstChild == childNodes[0]
 // alert(text)
}

function countBodyChildren() {
 var body_elemnt = document.getElementsByTagName("body")[0];
 // alert(body_elemnt.childNodes.length);// 13
 /*
 ❑ 元素节点的nodeType属性值是1。
 ❑ 属性节点的nodeType属性值是2。
 ❑ 文本节点的nodeType属性值是3。
 */
 // alert(body_elemnt.nodeType);// 1
}

window.onload = countBodyChildren;

为页面美化

/* laytout.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;
}

当没有占位图片时仍然展示图片

<html>

<head>
 <link rel="stylesheet" href="./layout.css">
</head>

<body>
 <h1>Snapshots</h1>
 <ul id="imagegallery">
     <li>
         <a href="./image/1.jfif" title="A pictureby one" onclick="showPic(this); return false;">One</a>
     </li>
     <li>
         <a href="./image/2.jfif" title="A pictureby Two" onclick="showPic(this); return false;">Two</a>
     </li>
     <li>
         <a href="./image/3.jfif" title="A pictureby Three" onclick="showPic(this); return false;">Three</a>
     </li>
     <li>
         <a href="./image/4.jfif" title="A pictureby Four" onclick="showPic(this); return false;">Four</a>
     </li>
 </ul>
 <img id="placeholder" src="./image/5.jpg" alt="my image gallery">
 <p id="description">Choose an image.</p>
</body>
<script src="./whichpic_2.js"></script>

</html>

function showPic(whichpic) {
 if (!document.getElementById("placeholder")) return false;
 var source = whichpic.getAttribute("href"); // 获取whichpic元素节点
 var placeholder = document.getElementById("placeholder");
 placeholder.setAttribute("src", source);
 if (document.getElementById("description")) {
     var text = whichpic.getAttribute("title");
     var description = document.getElementById("description");
     description.firstChild.nodeValue = text
 }
 return true;
}

function countBodyChildren() {
 var body_elemnt = document.getElementsByTagName("body")[0];
 // alert(body_elemnt.childNodes.length);// 13
 /*
 ❑ 元素节点的nodeType属性值是1。
 ❑ 属性节点的nodeType属性值是2。
 ❑ 文本节点的nodeType属性值是3。
 */
 // alert(body_elemnt.nodeType);// 1
}


/*
❑ 检查当前浏览器是否理解getElementsByTagName。
❑ 检查当前浏览器是否理解getElementById。
❑ 检查当前网页是否存在一个id为imagegallery的元素。
❑ 遍历imagegallery元素中的所有链接。
❑ 设置onclick事件，让它在有关链接被点击时完成以下操作：
 ■ 把这个链接作为参数传递给showPic函数；
 ■ 取消链接被点击时的默认行为，不让浏览器打开这个链接。
*/
function prepareGallery() {
 var gallery = document.getElementById("imagegallery");
 if (!document.getElementsByTagName || !document.getElementById || gallery) return false;
 var links = gallery.getElementsByTagName("a");
 for (var i = 0; i < links.length; i++) {
     links[i].onclick = function () {
         return !showPic(this);
     }
 }
}
/*
❑ 把现有的window.onload事件处理函数的值存入变量oldonload。
❑ 如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它。
❑ 如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。
*/
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
     window.onload = func;
     /*
         当页面加载完成后，该事件句柄会检查是否存在已注册的回调函数。如果存在，则创建一个新的匿名函数，并分别调用原有的和新的回调函数；否则，直接将传入的回调函数赋值给window.onload属性。
     */
 } else {
     window.onload = function () {
         oldonload();
         func();
     }
 }
}
// 这段代码通过使用以上三个函数，实现了为图片库中的所有链接添加点击事件，并在单击某个链接时切换占位符图片的显示内容。
// 同时，它还确保了这些功能都是在页面完成后执行的，以避免由于DOM树未完全构建而导致的错误或意外行为发生
addLoadEvent(prepareGallery)

可以看到就算注释掉了占位图片程序仍然正常运行并且可以在点击后展示其他图片