JS写一个图片库，点击缩略图在当前页面可以显示大图

最新推荐文章于 2021-06-21 13:56:15 发布

weixin_30448685

最新推荐文章于 2021-06-21 13:56:15 发布

阅读量457

点赞数

原文链接：http://www.cnblogs.com/leilei95/p/5001606.html

版权

<html>
<head>
<meta charset="utf-8">
<title>缩略图</title>
<style type="text/css">
body{
font-family: "Helvetica","Arial",serif;
color:#333;
background-color: #ccc;
margin:1em 10%;
}
h1{
color:#333;
}
ul{
list-style:none;

}
a{
text-decoration:none;
color:#c60;
font-weight: bold;
}
li{
display:inline;
padding:1em;
}
.smallimg{
width:70px;
height:70px;
}
#placeholder{
width:400px;
height:300px;
font-size: 50px;
font-weight: bolder;
display:block;
clear:both;
}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="image/large/blue.jpg" title="他是blue" >
<img class="smallimg" src="image/large/blue.jpg"></a>
</li>
<li>
<a href="image/large/green.jpg" title="他是green">
<img class="smallimg"src ="image/large/green.jpg"></a>
</li>
<li>
<a href="image/large/red.jpg" title="他是red">
<img class="smallimg"src="image/large/red.jpg"></a>
</li>
<li>
<a href="image/large/purple.jpg" title="他是purple">
<img class="smallimg"src ="image/large/purple.jpg"></a>
</li>
</ul>
<img id="placeholder" src="image/large/gif.jpg" alt="my image gallery">
<p id="description">Choose an image</p>

</body>
<script>
window.οnlοad=function(){
var links= document.getElementsByTagName("a");
for(var i =0;i<links.length;i++){
links[i].οnclick=function(){
//return showPic(this) ? false : true;
return !showPic(this); //当showPic切换成功时阻止默认行为，失败时触发
// return false;
}
}
function showPic(pic){
//检查浏览器是否支持DOM
if(!document.getElementById("placeholder")) return false;
var placeholder = document.getElementById("placeholder");
var sorce = pic.getAttribute("href");
placeholder.setAttribute("src",sorce);
//检查是否存在id="discription"的元素
if(document.getElementById("description")){
var description = document.getElementById("description");
var text = pic.getAttribute("title");
description.childNodes[0].nodeValue = text;
}
return true;
// var inspan = document.getElementById("innner");
// inspan.innerHTML = information;
}
}
</script>
</html>