DOM Scripting 学习六 - Image Gallery

最新推荐文章于 2024-10-02 23:04:10 发布
最新推荐文章于 2024-10-02 23:04:10 发布
阅读量106 收藏 1
点赞数
分类专栏： 前端 文章标签： 学习 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Darcyyyy/article/details/126095476
版权

gallery

images

placeholder.gif
thumbnail_rose.jpg
thumbnail_fireworks.jpg
thumbnail_coffee.jpg
thumbnail_bigben.jpg
rose.jpg
fireworks.jpg
coffee.jpg
bigben.jpg

版本一

gallery.html

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Image Gallery</title>
    <script type="text/javascript" src="scripts/showPic.js"></script>
    <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>

<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="images/fireworks.jpg" title="A fireworks display"
                onclick="showPic(this);return false;">Fireworks</a>
        </li>
        <li>
            <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">Coffee</a>
        </li>
        <li>
            <a href="images/rose.jpg" title="A red rose" onclick="showPic(this);return false;">Rose</a>
        </li>
        <li>
            <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this);return false;">Big Ben</a>
        </li>
    </ul>
    <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
    <p id="description">Choose an image.</p>
</body>

</html>

scripts/showPic.js

function showPic(whichPic) {
    var source = whichPic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
    var titletext = whichPic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = titletext;
}

styles/layout.css

body {
    font-family: "Helvetica", "Arial", sans-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;
}

结果

在这里插入图片描述

版本二

gallery2.html

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Image Gallery</title>
    <script type="text/javascript" src="scripts/showPic2.js"></script>
    <link rel="stylesheet" href="styles/layout2.css" type="text/css" media="screen" />
</head>

<body>
    <h1>Snapshots</h1>
    <ul id="imagegallery">
        <li>
            <a href="images/fireworks.jpg" title="A fireworks display">
                <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
            </a>
        </li>
        <li>
            <a href="images/coffee.jpg" title="A cup of black coffee">
                <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
            </a>
        </li>
        <li>
            <a href="images/rose.jpg" title="A red, red rose">
                <img src="images/thumbnail_rose.jpg" alt="Rose" />
            </a>
        </li>
        <li>
            <a href="images/bigben.jpg" title="The famous clock">
                <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
            </a>
        </li>
    </ul>
    <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
    <p id="description">Choose an image.</p>
</body>

</html>

scripts/showPic2.js

function showPic(whichpic) {
    if (!document.getElementById("placeholder")) return true;
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    if (placeholder.nodeName != "IMG") return true;
    placeholder.setAttribute("src", source);
    if (!document.getElementById("description")) return false;
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
    var description = document.getElementById("description");
    if (description.firstChild.nodeType == 3) {
        description.firstChild.nodeValue = text;
    }
    return false;
}

function prepareGallery() {
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
            return showPic(this);
        }
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}

addLoadEvent(prepareGallery);

styles/layout2.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;
}

#imagegallery {
    list-style: none;
}

#imagegallery li {
    display: inline;
}

#imagegallery li a img {
    border: 0;
}

结果

在这里插入图片描述

版本三

gallery3.html

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Image Gallery</title>
    <script type="text/javascript" src="scripts/showPic3.js"></script>
    <link rel="stylesheet" href="styles/layout2.css" type="text/css" media="screen" />
</head>

<body>
    <h1>Snapshots</h1>
    <ul id="imagegallery">
        <li>
            <a href="images/fireworks.jpg" title="A fireworks display">
                <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
            </a>
        </li>
        <li>
            <a href="images/coffee.jpg" title="A cup of black coffee">
                <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
            </a>
        </li>
        <li>
            <a href="images/rose.jpg" title="A red, red rose">
                <img src="images/thumbnail_rose.jpg" alt="Rose" />
            </a>
        </li>
        <li>
            <a href="images/bigben.jpg" title="The famous clock">
                <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
            </a>
        </li>
    </ul>
</body>

</html>

scripts/showPic3.js

function showPic(whichpic) {
    if (!document.getElementById("placeholder")) return true;
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    if (placeholder.nodeName != "IMG") return true;
    placeholder.setAttribute("src", source);
    if (!document.getElementById("description")) return false;
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
    var description = document.getElementById("description");
    if (description.firstChild.nodeType == 3) {
        description.firstChild.nodeValue = text;
    }
    return false;
}

function prepareGallery() {
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
            return showPic(this);
        }
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}

function preparePlaceholder() {
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id", "placeholder");
    placeholder.setAttribute("src", "images/placeholder.gif");
    placeholder.setAttribute("alt", "my image gallery");
    var description = document.createElement("p");
    description.setAttribute("id", "description");
    var descText = document.createTextNode("Choose an image");
    description.appendChild(descText);
    var gallery = document.getElementById("imagegallery");
    gallery.parentNode.insertBefore(placeholder, gallery);
    gallery.parentNode.insertBefore(description, gallery);
}

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);

结果

在这里插入图片描述

版本四

gallery4.html

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Image Gallery</title>
    <script type="text/javascript" src="scripts/showPic4.js"></script>
    <link rel="stylesheet" href="styles/layout2.css" type="text/css" media="screen" />
</head>

<body>
    <h1>Snapshots</h1>
    <ul id="imagegallery">
        <li>
            <a href="images/fireworks.jpg" title="A fireworks display">
                <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
            </a>
        </li>
        <li>
            <a href="images/coffee.jpg" title="A cup of black coffee">
                <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
            </a>
        </li>
        <li>
            <a href="images/rose.jpg" title="A red, red rose">
                <img src="images/thumbnail_rose.jpg" alt="Rose" />
            </a>
        </li>
        <li>
            <a href="images/bigben.jpg" title="The famous clock">
                <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
            </a>
        </li>
    </ul>
</body>

</html>

scripts/showPic4.js

function showPic(whichpic) {
    if (!document.getElementById("placeholder")) return true;
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    if (placeholder.nodeName != "IMG") return true;
    placeholder.setAttribute("src", source);
    if (!document.getElementById("description")) return false;
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
    var description = document.getElementById("description");
    if (description.firstChild.nodeType == 3) {
        description.firstChild.nodeValue = text;
    }
    return false;
}

function prepareGallery() {
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
            return showPic(this);
        }
        links[i].onkeypress = links[i].onclick;
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

function preparePlaceholder() {
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id", "placeholder");
    placeholder.setAttribute("src", "images/placeholder.gif");
    placeholder.setAttribute("alt", "my image gallery");
    var description = document.createElement("p");
    description.setAttribute("id", "description");
    var descText = document.createTextNode("Choose an image");
    description.appendChild(descText);
    var gallery = document.getElementById("imagegallery");
    insertAfter(placeholder, gallery);
    insertAfter(description, placeholder);
}


addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);

结果

在这里插入图片描述

Darcyyyy
关注
专栏目录
JavaScript DOM 编程艺术 阅读总结 （第十二章 实践案例代码）
赫兹焦耳的博客
06-15 1326
JavaScript DOM 编程艺术 第十二章 实践案例 在开始学习前端的时候买了这本书，看了很多视频这本书也就没太认真看，最近终于是看完了这本书，最后的这章算是综合了前面大部分章节的内容的一个实例，这本书内容简单易懂，就像是一个人在你身边一点一点的教，很适合入门的小白，有一些基础的人看起来会很快，因为很多都是已经掌握的基础。 这第十二章如果你前面都跟着做了，其实很简单。 ...
Unreal-Engine-4.x-Scripting-with-C-Cookbook---Second-edition:由Packt Publishing
05-27
使用C ++ Cookbook的虚幻引擎4.x脚本-第二版 这是Packt发布的《 进行的代码库。 使用C ++和UE4的功能开发高质量的游戏组件并解决脚本问题 这本书是关于什么的？ 虚幻引擎4（UE4）是受欢迎且屡获殊荣的游戏引擎，...
Alter the structure of web pages with JavaScript
09-10 102
Most of the DOM methods you've seen so far are useful for identifying elements. Both getElementById and getElementByTagName allow you to quickly and easily target specific element nodesin a d...
【Flutter】使用image_gallery_saver保存图片
热门推荐
这家伙很懒，博客简介都不写
08-28 1万+
文章目录代码示例：遇见错误：安卓保存图片失败解决方案： 图片保存：image_gallery_saver：https://pub.flutter-io.cn/packages/image_gallery_saver 代码示例： // 申请权限 await PermissionHandler().requestPermissions([PermissionGroup.storage]); // 申请结果 PermissionStatus permission = await P
DOM Scripting 学习十三-Jay Skript And The Domsters
Darcyyyy的博客
08-02 498
DOM Scripting 学习笔记
DOM Scripting
weixin_30825199的博客
06-30 104
Use underscore for variable name and camel case for function: var temp_celsius; function convertToCelsius(){} Use var to define a local variable, if not defined with var, the variable will ...
《Dom Scripting》读书笔记
Ant Software Studio.
05-01 1401
《Dom Scripting》读书笔记Canca       最近看了一本《Jeremy Keith: DOM Scripting, Web design with JavaScript and the DOM. Apress,2006》中文名叫《JavaScript DOM 编程艺术》，是一本JavaScript DOM的专题书籍。我已经花了一个星期的时间，看完了。现在将其精华全部提
JavaScript DOM编程艺术
Matrix
06-25 2836
chapter 2: JavaScript 语法 JavaScript嵌入到html中的方式: 3种 作为一种解释型语言直接被浏览器读入并执行 语法 语句: 像英语中的句子,只不过受体是浏览器 注释: 受体是开发和维护的人.方式: //, /*...*/ 变量: 计算机中的一小块固定的内存区域,变量指向这块内存的地址,内存代表的值就是变量的值. 程序运行过程中,变量的值可以改...
react学习基础（第一张）
qq_73917015的博客
03-21 925
react基本使用规则
JavaScripting DOM编程艺术读书笔记(4－1)
默然说话
12-31 1311
 第4章案例研究：JavaScript美术馆现在，是时候利用DOM去完成一些简单的任务了。在这一章中，我将带领大家用JavaScript和DOM去建立一个图片库，并将其称为“JavaScript”美术馆。我们将按照以下步骤来完成这一案例：q 编写一份优秀的标记语言文档。q 编写一个JavaScript函数以显示用户想要查看的图片。<!--google_ad_client =
photoshop-cc-scripting-guide-2015.pdf
06-06
文档中的"Photoshop Scripting Basics"部分，首先对脚本编程进行了概述，解释了为什么以及如何使用脚本来自动化工作流程。这里会涵盖脚本的基本结构、语法，以及如何启动和运行脚本。脚本通常可以作为独立的文本文件...
practical-javascript-dom-scripting-ajax-projects:Frank Zammetti的“实用JavaScript，DOM脚本和Ajax项目”的源代码-ajax source code
03-25
Apress源代码 该存储库随附了Frank Zammetti撰写的（Apress，2007年）。 使用绿色按钮将文件下载为zip格式，或使用Git将存储库克隆到您的计算机上。 发行版 版本v1.0对应于已出版书籍中的代码，没有更正或更新。...
kotlin-scripting-compiler-impl.jar
03-21
kotlin-scripting-compiler-impl.jar
Go基础学习08-并发安全型类型-通道（chan）深入研究
FLJS_T的博客
09-28 908
在前面学习中了解到对于单值变量，如：int、string；多值变量，如：map存在多协程对资源竞争的并发问题，为了解决并发性通常需要引入sync.Mutex解决。>对于通道的基本声明方式有三种：声明并初始化带缓冲的通道（ch1）；声明并初始化一个不带缓冲的通道（ch2）；仅仅声明一个通道（ch3） >什么是通道：==一个通道相当于一个先进先出（FIFO）的队列。也就是说，通道中的各个元素值都是严格地按照发送的顺序排列的，先被发送通道的元素值一定会先被接收。Select和for循环实现对channel的多次选
10.2学习
2401_87363162的博客
10-02 1121
​ Spring AOP就是基于动态代理的，如果要代理的对象，实现了某个接⼝，那么Spring AOP会使⽤JDKProxy，去创建代理对象，⽽对于没有实现接⼝的对象，就⽆法使⽤ JDK Proxy 去进⾏代理了，这时候Spring AOP会使⽤基于asm框架字节流的Cglib动态代理 ，这时候Spring AOP会使⽤ Cglib ⽣成⼀个被代理对象的⼦类来作为代理。每个线程中都有一个自己的ThreadLocalMap类对象，可以将线程自己的对象保持到其中，各管各的，线程可以正确的访问到自己的对象。
从0学习React（3）
qq_54432917的博客
09-29 747
在第一篇文章中，我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结，我也大致知道了index.tsx里的很多语法。而第二篇文章，我对index.tsx文件的框架做了一个大致的分析，通过第二篇文章，我对index.tsx有了进一步的认识。按理来讲，第三篇文章我还是解析index.tsx文件，但是我发现，对于前两篇文章，其实我对语法的细节有很多不明白的点。因此这篇文章，我就把React的一些最基础的知识给梳理一下，帮助我更好的理解index.tsx的代码。
Go基础学习10-原子并发包sync.atomic的使用：CSA、Swap、atomic.Value......
最新发布
FLJS_T的博客
10-02 880
原子操作sync.atomic以及原子变量atomic.Value详细介绍。go中原生的支持原子操作的函数支持的变量类型int32、int64、uint32、uint64、uintptr，以及unsafe包中的Pointer。对于上述原子操作类型中的每一个，可以支持的数据类型有：==int32、int64、uint32、uint64、uintptr，以及unsafe包中的Pointer。但是否sync.Mutex变量能够保证操作的原子性。atomic.Value类型是开箱即用的，我们声明一个该类型的变量
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Darcyyyy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值