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

js图片库二次改进（动态创建HTML元素）

2017-09-03 21:51 411 查看

第一版：http://blog.csdn.net/lishichengyan/article/details/77759324

第二版：http://blog.csdn.net/lishichengyan/article/details/77806701

在学了动态创建HTML元素以后还可以进一步改进：

1）HTML：

去掉了placeholder和后面的p标签，改成在js里动态创建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/>
</head>
<body>
<h1>Famous Paintings</h1>
<ul id="imagegallery">
<li>
<a href="images/snowstorm.jpg" title="snow storm by Turner">
Snowstorm</a>
</li>
<li>
<a href="images/sunflowers.jpg" title="sunflowers by van Gogh">
Sunflowers</a>
</li>
<li>
<a href="images/selfportrait.jpg" title="double self portrait by Schiller">
Selfportrait</a>
</li>
<li>
<a href="images/traveller.jpg" title="an oil painting by Caspar David Friedrich">
Traveller</a>
</li>
</ul>
</body>
</html>
2）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-decoration:none;
}

ul{
padding:0;/*设置内边距*/
}
/*
li{
float:left;
padding:1em;
list-style:none;
}
*/
#imagegallery{
list-style:none;
}

#imagegallery li{
display:inline;
}

#imagegallery li a img{
border:0;
}
3）JS：

window.onload=function(){
preparePlaceholder();
prepareGallery();
}

function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;//取得父节点
if(parent.lastChild==targetElement){
parent.appendChild(newElement);//如果只有一个孩子，直接调用appendChild即可
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);//否则插在目标节点的nextSibling前面
}
}

function preparePlaceholder(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var placeholder=document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.jpg");
placeholder.setAttribute("alt","my image gallery");
var description=document.createElement("p");
description.setAttribute("id","description");
var desctext=document.createTextNode("Choose a image");
description.appendChild(desctext);
var gallery=document.getElementById("imagegallery");
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}

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(){
return showPic(this);
}
}
}

function showPic(whichpic){
if(!document.getElementById("placeholder")) return true;
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
if(placeholder.nodeName!="IMG") return true;
placeholder.setAttribute("src",source);//注意source不要用""
if(!document.getElementById("description")) return false;
var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
var description=document.getElementById("description");
if(description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}
return false;
}总之一个重要的原则是：网页的结构、样式和行为要尽量分开。。

附：

window.onload也可以用这种方式：

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

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

标签：

相关文章推荐

新的分享

章节导航