最近在看js编程艺术,照葫芦画瓢,做了一个小网页。作为一枚前端渣渣,遇到了好多坑,在这里就不提了。
首先是html代码
/*gallery.html*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>image gallery</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css" media="screen">
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/baiyang.jpg" title="baiyang">baiyang<img src="images/thumbnail_baiyang.jpg">
</a>
</li>
<li>
<a href="images/jinniu.jpg" title="jinniu">jinniu<img src="images/thumbnail_jinniu.jpg">
</a>
</li>
<li>
<a href="images/shuangyu.jpg" title="shuangyu">shuangyu<img src="images/thumbnail_shuangyu.jpg">
</a>
</li>
<li>
<a href="images/shuiping.jpg" title="shuiping">shuipinh<img src="images/thumbnail_shuiping.jpg">
</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>
</body>
</html>
然后css代码
/* layout.css*/
body{
font-family: "Helbetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
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;
background-color: #fff;
}
#imagegallery{
list-style: none;
}
#imagegallery li{
display: inline;
}
#imagegallery li a img{
border: 0;
}
最后js代码
/*showPic.js*/
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
function preparePlaceholder(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "images/placeholder.gif");
placeholder.setAttribute("alt", "my image gallery");
var description = document.createElement("p");
description.setAttribute("id", "description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}
function prepareGallery() {
if(!document.getElementsByTagName) return false;
if(!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);
}
links[i].onkeypress = links[i].onclick;
}
}
function showPic(whichpic){
if(!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
if(!document.getElementById("description")) return false;
if(whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
}else{
var text = "";
}
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){
description.firstChild.nodeValue = text;
}
return false;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
注意css,js代码所在文件夹!!!
最后的效果图: