编程
您现在的位置:首页 >> 编程

JS+CSS相册

<!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=utf-8" />

<title>JS+CSS相册展示</title>

<style>

*{ margin:0; padding:0; list-style:none}

body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.8;}

img{ display:block; border:0;}

h1,h2{ background:#85B829; line-height:2.5; font-size:14px; padding-left:10px; color:#fff;}

#pics{ border-left:3px solid #468C50; border-right:3px solid #99CC99; background:#B5DF63; float:left; width:1050px;}

li{ float:left;}

a{ display:block; background:#fff; border:1px solid #A4D742; text-align:center; color:#598628; text-decoration:none; padding:5px; margin:10px;}

a:hover,a:active{ background:#99CC33; border:1px solid #85B829; border-left:1px solid #fff; border-top:1px solid #fff; color:#fff}

#showpic{ border:1px solid #85B829; padding:5px; display:none; clear:left; background:#FFF; text-align: center}

ul,#showpic{ margin:10px;}

h2{ color:#598628; background:none; text-align:left}

#showpic img{ margin:auto}

</style>

</head>

<body>

<div id="pics">

<h1>我的图集</h1>

<ul>

<li><a href="tool/ExamplePic/example1.jpg" title="来天来了"><img src="tool/ExamplePic/example1.jpg" width="120" height="90" />春天</a></li>

<li><a href="tool/ExamplePic/example2.jpg"  title="黄昏风景"><img src="tool/ExamplePic/example2.jpg"  width="120" height="90" />黄昏</a></li>

<li><a href="tool/ExamplePic/example3.jpg"  title="树林风光"><img src="tool/ExamplePic/example3.jpg"  width="120" height="90" />树林</a></li>

<li><a href="tool/ExamplePic/example4.jpg"  title="漂亮城市"><img src="tool/ExamplePic/example4.jpg"  width="120" height="90" />漂亮</a></li>

</ul>

</div>

<script language="javascript">

function setDiv(){

var pics = document.getElementById("pics");

var showpic = document.createElement("div");

showpic.setAttribute("id", "showpic");

pics.appendChild(showpic);

showpic.appendChild(document.createElement("h2"));

showpic.appendChild(document.createElement("img"));

var links = pics.getElementsByTagName("a");

for(var k=0; k<links.length; k++){

links[k].onclick = function(){

return showPic(this);

}

}

}

function showPic(pic){

var showpic = document.getElementById("showpic");

showpic.style.display = "block";

showpic.getElementsByTagName("h2")[0].innerHTML = pic.title;

showpic.getElementsByTagName("img")[0].setAttribute("src", pic.href);

return false;

}

window.onload = setDiv;

</script>

</body>

</html>