您的位置：首页 > Web前端 > JavaScript

Javascript DOM(第二版) 案例研究：图片库改进版

2017-09-12 16:50 246 查看

先创建一个静态页面命名为"test.html"，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JAVASCRPIT图片的处理</title>
<style type="text/css">
img{
height:300px;
width:400px;
display:block;
clear:both;
padding:0;
border:6px groove #D3D3D3;
}
body{
font-family: "Helvetica","Arial",serif;
color:#333;
background-color:#ccc;
margin:1em 10%;
}
h1{
color:#333;
background-color:transparent;
}
a{
color:#c6o;
background-color:transparent;
font-weight:bold;
text-decoration: none;
}
ul{
float:left;
padding: 1em;
list-style: none;
}
li{
float:left;
padding:1em 1em 1em 1em;
list-style: none;
}
#imagegallery{
list-style:none;
}
#imagegallery li{
display:inline;
}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul id='imagegallery'>
<li><a href="image/img1.jpg" title="1">1</a></li>
<li><a href="image/img2.jpg" title="2">2</a></li>
<li><a href="image/img3.jpg" title="3">3</a></li>
<li><a href="image/img4.jpg" title="4">4</a></li>
</ul>
<div style="align:center">
<img id="placeholder" src="image/img6.jpg" title="5" alt="my image gallary" />
<p id="description" >Choose an image</p>
</div>
<script type="text/javascript" src="scripts/showPic.js">  </script>
</body>
</html>

再创建一个js文件，并命名为"showPic.js",放在scripts文件目录下，代码如下:

window.onload = prepareGallery;
function prepareGallery(){
if(!document.getElementById ) return false;
if(!document.getElementsByTagName) 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)?false:true;
}
}
}
function showpic(whichpic){
if(!document.getElementById("placeholder")) return false;
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName!= "IMG") return false;
placeholder.setAttribute("src",whichpic.getAttribute("href"));
if(document.getElementById('description')){
var text=whichpic.getAttribute('title')?whichpic.getAttribute('title'):
var description=document.getElementById('description');
if(description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}
}
return true;
}

即可在浏览器上观察到效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航