javascript之Dom编程艺术二

来源：互联网发布：南京财经大学知乎编辑：程序博客网时间：2024/05/22 09:05

<!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 Documentwindow.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;}

效果图\:

0 0