JavaScript DOM编程艺术-JavaScript图片库

原创 2015年11月17日 20:10:30

通过点击链接可在一个网页上变换显示的图片。

test.html文件

<!document html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>image</title>
</head>
<body>
	<h1>show my picture</h1>
	<ul id="imagegallery">
		<li>
			<a href="1.jpg" title="a">aaaa</a>
		</li>
		<li>
			<a href="2.jpg" title="b">bbbb</a>
		</li>
		<li>
			<a href="3.jpg" title="c">cccc</a>
		</li>
		<li>
			<a href="4.jpg" title="d">dddd</a>
		</li>
	</ul>
	<img id="place" src="1.jpg" alt="my image"/>
	<p id="des">choose a title</p>
	<script type="text/javascript" src="addLoadEvent.js"></script>	
	<script type="text/javascript" src="show.js"></script>
</body>
</html>

show.js文件

// window.onload = function(){
	// prepareGallery();
// }
addLoadEvent(prepareGallery);

function prepareGallery(){
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById("imagegallery")) return false;
	var links=document.getElementById("imagegallery").getElementsByTagName("a");
	for(var i=0; i<links.length; i++){
		links[i].onclick = function(){
			return !showPic(this);
		}
	}
}
function showPic(whichpic){
	var source = whichpic.getAttribute("href");
	var place = document.getElementById("place");
	place.setAttribute("src",source);
	var text = whichpic.getAttribute("title");
	var des = document.getElementById("des");
	des.firstChild.nodeValue = text;
	return true;
}

addLoadEvent.js文件

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


如果同时定义两个函数他们都要在页面加载时得到执行怎么办呢?
方法1:
window.onload = function(){
	first.Function();
	secondFunction();
}

方法二:

使用addLoadEvent函数,如实例。

addLoadEvent(firstFunction);

addLoadEvent(secondFunction);

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




版权声明:本文为博主原创文章,未经博主允许不得转载。

案例研究:图片库改进版(js dom编程艺术第六章笔记)

本章完成的主要工作小结: 1.尽量让js代码不再依赖于那些没有保证的假设,为此引入测试项和检查,是js代码能够平稳退化 2.避免使用onkeypress事件处理函数 3.html标记文档与js分离 源...

javascript 图片库(javascript Dom)

把超链接的onclick函数返回值为false,可以防止用户被带到目标链接窗口。 1、index.html javascript 图片库 javascript 图片库 ...

JavaScript DOM编程艺术 学习笔记(六)图片库改进版

图片库这个例子 1。符合平稳退化 Fireworks 即使不支持javaScript 浏览器也会打开href属性给的链接 所以符合了平稳退化 而如果用 即选用...

JavaScript Dom编程艺术-C6 案例研究:图片库改进版

此系列文章主要为学习总结,源自《JavaScript Dom编程艺术》,这是一个关于js,css,html编程文件风格的书籍。...

javascript_dom编程艺术第六章图片库实例笔记。

HTML部分               Image Gallery         Snapshots   ...

web前端之JavaScript DOM编程艺术之案例研究:图片库改进版

web前端之JavaScript DOM编程艺术之案例研究:图片库改进版window.onload=prepareGallery;能进行相应的执行。但是如果有两个函数就不行了。 window.onl...

【JavaScript DOM编程艺术】- 案例研究:JS图片库

本章的学习重点有两个: 一是如何利用DOM所提供的方法去编写图片库脚本。 二是如何利用事件处理函数把JavaScript代码与网页集成在一起。...
  • Mluka
  • Mluka
  • 2017年06月05日 16:58
  • 93

【JavaScript DOM编程艺术】- 案例研究:图片库改进版

将“最佳实践”的理论应用在图片库上进行重构。
  • Mluka
  • Mluka
  • 2017年06月06日 10:58
  • 262

web前端之JavaScript DOM编程艺术之案例研究:JavaScript图片库

web前端之JavaScript DOM编程艺术之案例研究:JavaScript图片库index.html:

JavaScript DOM编程艺术 学习笔记(四)JavaScript 图片库

此例子是实现一个图片库,虽然网页标记代码没有多大,但加上几张图片后用户要下载的数据量就相当可观了。所以 此例中做了以下几件事: 1.保持图片清单list在当前页面 2.保持点击文字链接时不要转到...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript DOM编程艺术-JavaScript图片库
举报原因:
原因补充:

(最多只允许输入30个字)