您的位置：首页 > 其它

美术馆（完）

2016-03-22 00:29 232 查看

<!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>
<title>美术馆</title>
<style type="text/css">
.imageSmall
{
width: 112px;
height: 70px;
}

#nav li
{
/*设置ul li 表单浮动、去点、内边距*/
float: left;
list-style-type: none;
margin: 10px;
}
#nav
{
/*设置小图片总宽度，居中*/
width: 700px;
margin: 0 auto;
}
#dv
{
/*设置大图片居中*/
text-align: center;
}
</style>
<script type="text/javascript">
onload = function () {
//获得所有img标签
var imageSmall = document.getElementsByTagName("img");
//获得div标签
var dv = document.getElementById("dv");
//获得所有a标签
var aHref = document.getElementsByTagName("a");
for (var i = 0; i < imageSmall.length; i++) {
//小图片点击事件
imageSmall[i].onclick = function () {
if (dv.getElementsByTagName("img")) {
//如果已经存在大图片，就删除，dv的内部清空（不然越点越多）
dv.innerHTML = "";
}
//新建大图片
var imageLarge = document.createElement("img");
dv.appendChild(imageLarge);
//大图片的地址等于this小图片的地址，使用this关键字！！
imageLarge.src = this.src;
//return false;
}
}
}
</script>
</head>
<body>
<ul id="nav">
<li>
<img class="imageSmall" id="img1" src="source/image/01.jpg" /></li>
<li>
<img class="imageSmall" id="img2" src="source/image/02.jpg" /></li>
<li>
<img class="imageSmall" id="img3" src="source/image/03.jpg" /></li>
<li>
<img class="imageSmall" id="img4" src="source/image/04.jpg" /></li>
<li>
<img class="imageSmall" id="img5" src="source/image/05.jpg" /></li>
</ul>
<div style="clear: both">
</div>
<div id="dv">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航