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

javascript_dom编程艺术第六章图片库实例笔记。

2014-08-08 16:13 706 查看

HTML部分

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>Image Gallery</title>

<link rel="stylesheet" href="styles/layout.css" media="screen" >

</head>

<body>

<h1>Snapshots</h1>

<ul id="imagegallery">
<li>
<a href="images/c1.jpg" title="A fireworks display" ><img src="images/c1.jpg" alt="Fireworks" width=10%/></a>
</li>
<li>
<a href="images/c2.jpg" title="A cup of black coffee"><img src="images/c2.jpg" alt="Coffee" width=10%/></a>
</li>
<li>
<a href="images/c3.jpg" title="A red,red rose" ><img src="images/c3.jpg" alt="Rose" width=10%/></a>
</li>
<li>
<a href="images/c4.jpg" title="A famous clock"><img src="images/c4.jpg" alt="Big Ben" width=10%/></a>
</li>

</ul>

<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />

<p id="description">Choose an image.</p>

<script type="text/javascript" src="scripts/showPic.js"></script>

<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>

</body>

</html>

css

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-dexoration;
}

ul{
padding:0
}

li{
padding:2px;
}

#imagegallery{
list-style:none;
}

#imagegallery li{
display:inline;
}

#imagegallery li a img{
border:0;
}

#placeholder{
border:10px solid #fff;
}

js

function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName != "IMG") return false; //nodeName返回的值是大写。
placeholder.setAttribute("src",source);
if(document.getElementById("description")){
if(whichpic.getAttribute("title")){ //用于判断，如果有的a链接里没有title属性怎么办。也可用三元操作符书写。var text = whichpic.getAttribute("title")? whichpic.getAttribute("title") : "";不过经过测试发现这个不加也可以，
var text = whichpic.getAttribute("title");
}else{
var text = "";
}
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){ //判断description的第一个属性节点的类型是不是文本节点。元素节点：1；属性节点：2；文本节点：3. 经测试有效。
description.firstChild.nodeValue = text;
}
}
return true; //对应prepareGallery函数中点击时的平稳退化。如果运行，返回真值。不运行返回假值。测试有效

}

/* 统计页面内所有的元素个数。

function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);

}

window.onload = countBodyChildren;

*/

function prepareGallery(){
if(!document.getElementsByTagName || !document.getElementById)
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); //平稳退化。如果showPic()函数运行成功，则a链接默认效果不生效，反之则生效。
}
}

}

addLoadEvent(prepareGallery);

function addLoadEvent(func){
var ol
95a4
donload = window.onload; //把window.onload的值赋给oldonload变量。如果之前运行过window.onload = A; 那么oldonload变量的值就是A(); 如果没运行过，那么就是null。
if(typeof window.onload != 'function'){ //判断，如果之前window.onload进行过赋值（window.onload = A;类似这种。），那么typeof window.onload的值就是'function',如果没运行过，就是空。
window.onload = func; //如果类型不等于‘function’，那么在html页完成后加载func的值的函数。
}else{
window.onload = function(){ //如果类型等于'function', 那就说明之前已经加载过函数，那么就先加载oldonload();(也就是函数A)，然后在那之后再运行func参数的函数。以保证顺序正确。
oldonload();
func();

}
}

}

用到的图片

c1.jpg

c2.jpg

c3.jpg

c4.jpg

placeholder.gif

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

标签： javascript 图片实例 dom

相关文章推荐

新的分享

章节导航