HTML部分
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Image Gallery</title>
<link rel="stylesheet" href="styles/layout.css" media="screen" >
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/c1.jpg" title="A fireworks display" ><img src="images/c1.jpg" alt="Fireworks" width=10%/></a>
</li>
<li>
<a href="images/c2.jpg" title="A cup of black coffee"><img src="images/c2.jpg" alt="Coffee" width=10%/></a>
</li>
<li>
<a href="images/c3.jpg" title="A red,red rose" ><img src="images/c3.jpg" alt="Rose" width=10%/></a>
</li>
<li>
<a href="images/c4.jpg" title="A famous clock"><img src="images/c4.jpg" alt="Big Ben" width=10%/></a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
<script type="text/javascript" src="scripts/showPic.js"></script>
<script type="text/javascript" src="scripts/jquery-1.8.0.min.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-dexoration;
}
ul{
padding:0
}
li{
padding:2px;
}
#imagegallery{
list-style:none;
}
#imagegallery li{
display:inline;
}
#imagegallery li a img{
border:0;
}
#placeholder{
border:10px solid #fff;
}
js
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName != "IMG") return false; //nodeName返回的值是大写。
placeholder.setAttribute("src",source);
if(document.getElementById("description")){
if(whichpic.getAttribute("title")){ //用于判断，如果有的a链接里没有title属性怎么办。也可用三元操作符书写。var text = whichpic.getAttribute("title")? whichpic.getAttribute("title") : "";不过经过测试发现这个不加也可以，
var text = whichpic.getAttribute("title");
}else{
var text = "";
}
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){ //判断description的第一个属性节点的类型是不是文本节点。元素节点：1；属性节点：2；文本节点：3. 经测试有效。
description.firstChild.nodeValue = text;
}
}
return true; //对应prepareGallery函数中点击时的平稳退化。如果运行，返回真值。不运行返回假值。测试有效
}
/* 统计页面内所有的元素个数。
function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
}
window.onload = countBodyChildren;
*/
function prepareGallery(){
if(!document.getElementsByTagName || !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); //平稳退化。如果showPic()函数运行成功，则a链接默认效果不生效，反之则生效。
}
}
}
addLoadEvent(prepareGallery);
function addLoadEvent(func){
var oldonload = window.onload; //把window.onload的值赋给oldonload变量。如果之前运行过window.onload = A; 那么oldonload变量的值就是A(); 如果没运行过， 那么就是null。
if(typeof window.onload != 'function'){ //判断，如果之前window.onload进行过赋值（window.onload = A;类似这种。）， 那么typeof window.onload的值就是'function',如果没运行过，就是空。
window.onload = func; //如果类型不等于‘function’，那么在html页完成后加载func的值的函数。
}else{
window.onload = function(){ //如果类型等于'function', 那就说明之前已经加载过函数，那么就先加载oldonload();(也就是函数A)，然后在那之后再运行func参数的函数。以保证顺序正确。
oldonload();
func();
}
}
}
用到的图片
c1.jpg
c2.jpg
c3.jpg
c4.jpg
placeholder.gif
1434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
