本文介绍了一个基于JavaScript实现的图片展示效果，通过简单的HTML结构配合自定义JavaScript函数，实现了点击链接显示对应图片的功能，并附带了完整的代码示例。
《JavaScript DOM编程艺术》真是一本好书，作者把让我曾经认为深不可测的Javascript讲解的十分通俗易懂。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript图片馆</title>
body{...}{
text-align:center;
font-size:20px;
}
ul{...}{
list-style:none;
}
li{...}{
float:left;
display:block;
margin-left:2px;
margin-top:20px;
}
li a.hover{...}{
background-color:#000000;
}
#showpic{...}{
margin:0px auto;
}
function showpic(whichpic)...{
var source=whichpic.getAttribute("href");//获取href属性值
var pic=document.getElementById("showpic");//获取ID为showpic的对象
pic.setAttribute("src",source);//将值传递给对象属性
var zhangshu=whichpic.getAttribute("title");
var text=document.getElementById("text");
text.firstChild.nodeValue=zhangshu;
看完了第四章《javascript 美术馆》，于是按照书上的做了这个例子。
1：首先新建了一个文件夹 ------ Showpic
又建立了三个子文件夹 ------ css，js，image。
2：在Showpic下新建一个主页面：index.asp
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>javascript图片馆</title> <script type="text/javascript" src="js/showpic.js"></script>
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>
<body>
<ul>
<li><a href="image/1.gif" alt="第一张图片" onclick="showpic(this);return false;" title="第一张">第一张</a></li>
<li><a href="image/2.gif" alt="第二张图片" onclick="showpic(this);return false;" title="第二张">第二张</a></li>
<li><a href="image/3.gif" alt="第三张图片" onclick="showpic(this);return false;" title="第三张">第三张</a></li>
<li><a href="image/4.gif" alt="第四张图片" onclick="showpic(this);return false;" title="第四张">第四张</a></li>
</ul>
<img src="image/1.gif" id="showpic" />
<p id="text">第一张</p>
</body>
</html>
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /></head>
<body> <ul> <li><a href="image/1.gif" alt="第一张图片" onclick="showpic(this);return false;" title="第一张">第一张</a></li> <li><a href="image/2.gif" alt="第二张图片" onclick="showpic(this);return false;" title="第二张">第二张</a></li> <li><a href="image/3.gif" alt="第三张图片" onclick="showpic(this);return false;" title="第三张">第三张</a></li> <li><a href="image/4.gif" alt="第四张图片" onclick="showpic(this);return false;" title="第四张">第四张</a></li> </ul><img src="image/1.gif" id="showpic" /><p id="text">第一张</p></body></html>
3：在css文件夹下建立样式表：style.css
body{...}{text-align:center;font-size:20px;}ul{...}{list-style:none;}li{...}{float:left;display:block;margin-left:2px;margin-top:20px;}li a.hover{...}{background-color:#000000;}#showpic{...}{margin:0px auto;}
4：在js文件夹下建立javascript脚本：showpic.js
function showpic(whichpic)...{var source=whichpic.getAttribute("href");//获取href属性值var pic=document.getElementById("showpic");//获取ID为showpic的对象pic.setAttribute("src",source);//将值传递给对象属性var zhangshu=whichpic.getAttribute("title");var text=document.getElementById("text");text.firstChild.nodeValue=zhangshu;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
