js图片库二次改进(动态创建HTML元素)

本文介绍了一个使用JavaScript动态创建HTML元素的示例,包括图片展示和描述更新的功能。通过分离网页的结构、样式和行为,实现了图片画廊的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一版:http://blog.youkuaiyun.com/lishichengyan/article/details/77759324

第二版:http://blog.youkuaiyun.com/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();
		}
	}
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值