JavaScript 美术馆（改进1）

最新推荐文章于 2023-01-03 22:46:31 发布

chjk1

最新推荐文章于 2023-01-03 22:46:31 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：《JavaScript DOM 编程艺术》文章标签： javascript float css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/chjk1/article/details/2461462

《JavaScript DOM 编程艺术》专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种改进网页图片展示的方法，通过使用JavaScript实现点击图片预览的同时保持页面不跳转，并同步显示图片描述，同时利用CSS美化页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

改进：
1、当点击某个链接时，我希望能留在这个网页而不是转到另一个窗口.
2、当点击某个链接时，我希望能留在这个网页上同时看到那张图片以及原有的图片清单。
3、当某个图片显示，相应的描述性文本也同时显示。
4、利用css让网页变得更美观。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<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, 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>

一、第1、2步改进由
onclick="showPic(this); return false;

function showPic(whichpic) {

var source = whichpic.getAttribute("href");

var placeholder = document.getElementById("placeholder");

placeholder.setAttribute("src",source);

}

二、第3步改进由

function showPic(whichpic) {

var text = whichpic.getAttribute("title");

var description = document.getElementById("description");

description.firstChild.nodeValue = text;

}

三、showPic()完整代码：

function showPic(whichpic) {

var source = whichpic.getAttribute("href");

var placeholder = document.getElementById("placeholder");

placeholder.setAttribute("src",source);

var text = whichpic.getAttribute("title");

var description = document.getElementById("description");

description.firstChild.nodeValue = text;

}

四、第4步改进由
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
而layout.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;

}

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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