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

130 js javascrtipt DOM编程艺术1~6章

2016-01-14 17:10 597 查看

javascrtipt DOM编程艺术1~6章

<!DOCTYPE html>
<html>
<head>
<title>learnJS</title>
<style>
body {
color: #333;
background: #ccc;
margin: 1em 10%;
font-family: "helvetica","Arial","Serif";
}
h1 {
color: #333;
background-color: transparent;
}
img {
height: 340px;
width: 500px;
clear: both;
display: block;
}
</style>
<script>
// window.onload = prepareGallary;
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}

addLoadEvent(prepareGallary);

function prepareGallary(){
//现代浏览器不需要再判断
// if(!document.getElementById ) return false;
// if(!document.getElementByTagName ) return false;
// if(!document.getElementById("imagegallary") ) return false;

var gallary = getElementById("imagegallary");
var links = gallary.getElementByTagName("a");
for(var i = 0; i < links.length; i++){
links[i].onClick = function(){
return showPic(this)? false:true;
}
links[i].onkeypress = links[i].onClick;
}
}

function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;
var placeholder = document.getElementById("placeholder");
var link = whichpic.getAttribute("title");

if(placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src",link);

if(document.getElementById("description")){
var description = document.getElementById("description");
var text = whichpic.getAttribute("title");
if(description.firstChild.nodeType == 3){
description.firstChild.nodeValue = text;
}
}
return true;
}
</script>
</head>
<body>
<h1>SnapShots</h1>
<ul id="imagegallary">
<li>
<a href="#" title="pic1.jpg" onClick="showPic(this);return false;">pic1</a>
</li>
<li>
<a href="#" title="pic2.jpg" onClick="showPic(this);return false;">pic2</a>
</li>
<li>
<a href="#" title="pic3.jpg" onClick="showPic(this);return false;">pic3</a>
</li>
<li>
<a href="#" title="pic4.jpg" onClick="showPic(this);return false;">pic4</a>
</li>
</ul>
<img src="" alt="pic1" id="placeholder" />
<p id="description">choose one image</p>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航