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

【javascript之Dom编程艺术】三

2016-12-25 15:48 232 查看

<!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>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/myjs.js" language="uft-8"></script>
</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>

</body>
</html>

// JavaScript Document
/**
* 在网页加载的时候添加多个函数
*`1 如果原来绑定过函数就原来的函数取出来跟现在的一起绑定
* 2 如果原来没有绑定过函数就直接绑定传入的函数
*/
function addLoadEvent(func){
var oldload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldload();
func();
}
}
}

/**
*1 在一个元素之后插入另一个元素
*1 判断要插入的元素是否是最后一个元素，是就直接添加到元素末尾
*2 如果不是的话就直接在目标元素的兄弟节点之前插入元素
*/

function insertAfter(newElement,tarElem){
var parent=tarElem.parentNode;
if(parent.lastChild == tarElem){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,tarElem.nextSibling);
}
}

/**
* 为每个连接元素绑定一个事件
*/
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;
}
}
}

/**
*准备展示位
*1 安全性检查
*2 创建图片展示位
*3 创建文本展示位
*/
function prarePlaceholder(){
if(!document.createElement) return false;
if(!document.getElementById) return false;
if(!document.createTextNode) return false;
if(!document.getElementById('imagegallery')) return false;

var placeHolder=document.createElement("img");
placeHolder.setAttribute("id","placeHolder");
placeHolder.setAttribute("src","image/0.jpg");
placeHolder.setAttribute("alt","nihao");

var description =document.createElement("p");
description.setAttribute("id","description");
var textnode=document.createTextNode("choose an img");
description.appendChild(textnode);

var gallary=document.getElementById("imagegallery");
insertAfter(placeHolder,gallary);
insertAfter(description,placeHolder);
}

addLoadEvent(prarePlaceholder);
addLoadEvent(prepareGallery);

/* 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;
}

效果展示:

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

标签：

相关文章推荐

新的分享

章节导航