<!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后也不影响页面正常访问），支持键盘访问！