javascript美术馆改进版

ice-cream

浏览: 329316 次
性别:
来自: 上海

最近访客更多访客>>

fly-sky

zcm1205

ryan.liu

灰袍人

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

JavaScript XHTML CSS UP HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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</title>
<style rel="stylesheet" type="text/css">
<!--
body{
	background:#666;
	margin:0;
	padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#fff;
}

a:link,a:visited,a:active{
	text-decoration:none;
	color:#fff;
	font-size:12px;
}

a:hover{
	text-decoration:underline;
	color:#0cf;
	font-size:12px;
}

.content{
	width:400px;
	margin:0 auto;
}

ul{
	margin:0;
	padding:0;
	list-style-type:none;
	
}

li{
	margin-bottom:10px;
	float:left;
	padding-right:20px;
}
-->
</style>

<script language="javascript" type="text/javascript">

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

function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}
	else {
		parent.insertBefore(newElement,targetElement.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","http://ice-cream.iteye.com/upload/picture/pic/8572/bf42aa6e-fec4-31f1-9814-361234b93ca7.gif");
	placeholder.setAttribute("alt","a beautiful day's morning");
	var description = document.createElement("p");
	description.setAttribute("id","description");
	var desctext = document.createTextNode("Choose an 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);
		}
	links[i].onkeypress = links[i].onclick;
	}
}

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);
	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;
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

</script>
</head>
<body>
<div class="content">
<h1>One day morning</h1>
<ul id="imagegallery">
	<li><a href="http://ice-cream.iteye.com/upload/picture/pic/8580/727a3394-9931-3dd5-a91a-3d6939c17f6f.gif" title="One day morning,I first open my eyes and get up." onclick ="return showPic(this);" onkeypress="return showPic(this);">1.Get up</a></li>
	<li><a href="http://ice-cream.iteye.com/upload/picture/pic/8578/67a50c92-bb8f-35c1-ac42-b3ef20d7905d.gif" title="I come to the toilet to brush my teeth." onclick ="return showPic(this);" onkeypress="return showPic(this);">2.Brush teeth</a></li>
	<li><a href="http://ice-cream.iteye.com/upload/picture/pic/8576/63f36ddd-424d-3342-9194-5a056b6ca509.gif" title="Then wash my face to become sober." onclick ="return showPic(this);" onkeypress="return showPic(this);">3.Wash face</a></li>
	<li><a href="http://ice-cream.iteye.com/upload/picture/pic/8574/87f1dd65-fd7e-362f-8861-ee53ef4e0314.gif" title="Next to mirror to comb my hair,and over" onclick ="return showPic(this);" onkeypress="return showPic(this);">4.Comb hair</a></li>
</ul>
</div>
</body>
</html>

javascript_gallery.rar (1.6 KB)
描述: javascript美术馆改进版
下载次数: 169

分享到：

用javascript来充实文档的内容 | javascript美术馆

2008-03-04 14:31
浏览 2070
评论(0)
论坛回复 / 浏览 (0 / 2090)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript美术馆改进版

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript美术馆改进版

评论

发表评论

相关推荐

如何去掉链接虚线框

Javascript获得当前地址栏url

文字滚动

会动的眼睛

页面输出时一些常用的小技巧(二)

keycode值和chr码值

展示图片的例子1

二级菜单事件

删除空白子节点

javaScript DOM特性/方法

分页效果

动画效果打开关闭图层

很炫的图片循环效果

实用的js动画

用js给input传值

常用js语句——大全

用javascript来充实文档的内容

javascript美术馆

js日历

javascript的IE和Firefox兼容性问题

最近访客更多访客>>