javascript 图像馆（javascript dom 例子）

<!DOCTYPE >
<html>
	<head>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="style/base.css" />
		<link rel="stylesheet" type="text/css" href="style/base-ui.css" />
		<script type="text/javascript" src="scripts/imagegallery1.js"></script>
		<title>Image Gallery</title>
	</head>
	<body>
		<div id="page">
			<div id="content">
				<div class="image-nav">
					<h1>Snopshots</h1>
					<ul id="imagegallery">
						<li>
							<a href="images/bigben.jpg" title="The famous clock" >
								BIGBEN</a>
						</li>
						<li>
							<a href="images/coffee.jpg" title="A cup of black coffee" >
								COFFEE</a>
						</li>
						<li>
							<a href="images/fireworks.jpg" title="A fireworks display" >
								FIREWORKS</a>
						</li>
						<li>
							<a href="images/rose.jpg" title="A red,red rose" >
								ROSE</a>
						</li>
					</ul>
				</div>
				<div class="showpic">
					<img id="palceholder" src="images/placeholder.gif" alt="my image gallery" />
					<p id="description">Choose an image. </p>
				</div>
			</div>
			<div id="footer"></div>
		</div>
	</body>
</html>

function showpic(whichpic) {
	if(document.getElementById('placeholder'))
		return false;
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("palceholder");
	if (placeholder.nodeName != "IMG") return false;
	placeholder.setAttribute("src", source);
	if(document.getElementById("description")) {
		var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title"): "";
		var text = whichpic.getAttribute("title");
		var description = document.getElementById("description");
		description.firstChild.nodeValue = text;
	}
	return true;
}

function prepareGallery() {
	if(!document.getElementsByTagName)
		return false;
	if(!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() {
			showpic(this);
			return !showpic(this);
		}
		links[i].onkeypress = links[i].onclick;
	}
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(prepareGallery);

例子很简单，写下主要是记住作者js优化的思想

支持平稳退化
javascript 与 html 标记分离

检查当前浏览器是否理解getElementById
检查当前浏览器是否理解 getElementByTagName
检查当前网页是否存在id为 imagegallery placeholder的元素
遍历imagegallery元素中的所有连接

var links = gallery.getElementsByTagName("a");
	for(var i = 0; i < links.length; i++) {
		links[i].onclick = function() {
			showpic(this);
			return !showpic(this);
		}
		links[i].onkeypress = links[i].onclick;
	}

links[i].onkeypress = links[i].onclick; 为了保证支持键盘操作，将onclick事件赋给onkeypress

遍历所有的链接，点击调用showpic()函数，如果成功则返回false，即等同于

<a href="images/bigben.jpg" title="The famous clock" onclick = "showpic(this);return false;">BIGBEN</a>

点击链接显示图片且不跳转到下一个页面！

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

此函数的作用是使页面加载时可以自动调用prepareGallery()函数
把现有的window.onload 事件处理函数的值存入变量oldonload
如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它
如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令末尾

之后只需添加一行代码 addLoadEvent(prepareGallery);

总结： javascript 需要做到结构与样式的分离，支持平稳退化（即禁用浏览器javascript后也不影响页面正常访问），支持键盘访问！

posted @ 2012-01-22 09:41 cacique 阅读(422) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

GoodSpeed

javascript 图像馆（javascript dom 例子）

公告