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

【javascript之Dom编程艺术】二

2016-12-25 12:46 465 查看

<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/myjs.js" language="uft-8"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="imagegallery">
<li>
<a href="javascript:void(0);" alt="image1">
<img id="showP" src="image/0.jpg" />
</a>
</li>
<li>
<a href="javascript:void(0);" alt="image2">
<img id="showP" src="image/1.jpg" />
</a>
</li>
<li>
<a href="javascript:void(0);" alt="image3">
<img id="showP" src="image/3.jpg" />
</a>
</li>
<li>
<a href="javascript:void(0);" alt="image4">
<img id="showP" src="image/4.jpg" />
</a>
</li>
</ul>
<div>
<img id="placeHolder" name="IMG" src="image/0.jpg"/>
<p id="description">image</p>
</div>
</body>
</html>

// JavaScript Document
window.onload = function(){
prepareGallery();
}
function prepareGallery(){
//1 安全性检查
var garray = document.getElementById("imagegallery");
var links = garray.getElementsByTagName("a");
if(!garray){ return false;}
if(links.length==0){ return false;}

//2 为元素绑定监听事件
for(var i=0;i<links.length;i++){
links[i].onclick=function(){
return showPicture(this)? false : true;
};
}
}

/**
* 展示图片
*/
function showPicture(showPic){
if(!document.getElementById("placeHolder")){
return false;
}
var source=showPic.getElementsByTagName("img")[0].getAttribute("src");
var placeHolder=document.getElementById("placeHolder");
if(placeHolder.nodeName!="IMG"){ return false}
placeHolder.setAttribute("src",source);
if(document.getElementById('description')){
var text=showPic.getAttribute('alt')?showPic.getAttribute("alt"):"";
var textNode=document.getElementById("description");
//判断是否为文本节点的图片
if(textNode.firstChild.nodeType ==3){
textNode.firstChild.nodeValue = text;
}
}
}

/* CSS Document */

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-decoration:none;
}

ul{
padding:0;
}

li{
float:left;
padding:1em;
list-style:none;
}
img{
display:block;
clear:both;
}

#imagegallery{
list-style:none;
}

#imagegallery li{
display:inline;
}

#imagegallery li a img{
border:0;
}

#showP{
width:100px;
height:100px;
}

效果图\:

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

标签：

相关文章推荐

新的分享

章节导航