创建JavaScript图片库
经过一段时间的学习,发现JavaScript语法与c++语法非常相似,很快便能够使用JavaScript,所以不在此做JavaScript语法介绍,可通过JavaScript学习心得了解。
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi1.css" rel="stylesheet">
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="xty.jpg" title="tuanpian11" onclick="showPic(this);return false;">tupian1</a>
</li>
<li>
<a href="abc.jpg" title="tupian22" onclick="showPic(this);return false;">tupian2</a>
</li>
<li>
<a href="xty.jpg" title="tupian33" onclick="showPic(this);return false;">tupian3</a>
</li>
<li>
<a href="abc.jpg" title="tupian44" onclick="showPic(this);return false;">tupian4</a>
</li>
</ul>
<img src="abc.jpg" alt="my" id="placeholder">
<p id="description">Choose an image</p>
<script src="lianxi1.js">
</script>
</body>
</html>
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;
}
JavaScript代码:
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;
return false;
}
JavaScript和HTML合并的形式代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<link href="lianxi1.css" rel="stylesheet">
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="xty.jpg" title="tuanpian11" onclick="showPic(this);return false;">tupian1</a>
</li>
<li>
<a href="abc.jpg" title="tupian22" onclick="showPic(this);return false;">tupian2</a>
</li>
<li>
<a href="xty.jpg" title="tupian33" onclick="showPic(this);return false;">tupian3</a>
</li>
<li>
<a href="abc.jpg" title="tupian44" onclick="showPic(this);return false;">tupian4</a>
</li>
</ul>
<img src="abc.jpg" alt="my" id="placeholder">
<p id="description">Choose an image</p>
<script type="text/javascript">
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;
return false;
}
</script>
</body>
</html>
应用到的知识:
- 事件处理函数
onclick = "show(this);return false"
,作用为:在特定事件发生时调用特定的JavaScript代码。其中return false防止了转到目标链接窗口。 - DOM获取元素的三种方法
document.getElementById("id")
返回一个与那个有着给定id属性值得元素节点对应的对象。
document.getElementByTagName("tag")
返回一个具有相同标签的数组。
document.getElementByClassName("class")
返回一个具有相同类名的元素数组。 - DOM属性
node.firstChild
代表childNodes数组的第一个元素。
nodeValue
代表节点的值。