javascript图片库样例的html与js分离，以及兼容性优化

最新推荐文章于 2021-11-05 08:59:57 发布

运维个西瓜

最新推荐文章于 2021-11-05 08:59:57 发布

阅读量257

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/watermelonbig/article/details/78484916

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

javascript图片库样例的html与js分离，以及兼容性优化。

学习JavaScript DOM编程艺术一书所做的一些笔记。

gallery.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Image Gallery</title>
	<link rel="stylesheet" href="styles/layout.css" media="screen" />	
	<script type="text/javascript" src="scripts/showPic.js"></script>
	<script type="text/javascript">
		addLoadEvent(prepareGallery);
	</script>
</head>
<body>
	<h1>Snapshots</h1>
	<!--
	<ul>	
		<li><a href="images/fireworks.jpg" οnclick="showPic(this); return false;" title="A fireworks display">Fireworks</a></li>
		<li><a href="images/coffee.jpg" οnclick="showPic(this); return false;" title="A cup of back coffee">Coffee</a></li>
		<li><a href="images/rose.jpg" οnclick="showPic(this); return false;" title="A red,red rose">Rose</a></li>
		<li><a href="images/bigben.jpg" οnclick="showPic(this); return false;" title="A famous clock">Big Ben</a></li>		
	</ul>
	-->	
	<ul id="imagegallery">	
		<li><a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a></li>
		<li><a href="images/coffee.jpg" title="A cup of back coffee">Coffee</a></li>
		<li><a href="images/rose.jpg" title="A red,red rose">Rose</a></li>
		<li><a href="images/bigben.jpg" title="A famous clock">Big Ben</a></li>		
	</ul>
	<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
	<p id="description">Choose an image.</p>
	
</body>
</html>

showPic.js

function showPicOld(whichpic) {
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src",source);
	var text = whichpic.getAttribute("title");
	var description = document.getElementById("description");
	description.firstChild.nodeValue = text;
}
// 通过该函数将js与html分离，且在该函数中做出了多处优化设计
function prepareGallery() {
	// 检查当前浏览器是否理解getElementsByTagName
	if (!document.getElementsByTagName) return false;
	// 检查当前浏览器是否理解getElementsById
	if (!document.getElementById) return false;
	// 检查当前网页是否存在一个id为imagegallery的元素
	if (!document.getElementById("imagegallery")) return false;
	var gallery = document.getElementById("imagegallery");
	var links = gallery.getElementsByTagName("a");
	// 遍历imagegallery元素中的所有链接
	for ( var i=0; i<links.length; i++) {
		// 设置onclick事件，让它在有关链接被点击时完成以下操作：
			// 把这个链接作为参数传递给showPic函数
			// 取消链接被点击时的默认行为，不让浏览器打开这个链接。而同时在showPic函数调用失败时，又允许链接点击行为的平稳退化。
		links[i].onclick = function() {
			return showPic(this) ? false : true;
		}
	}
}

function showPic(whichpic) {
	// 检查当前网页是否存在一个id为placeholder的元素
	if (!document.getElementById("placeholder")) return false;
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	// 检查placeholder元素的nodeName是否为IMG
	if (placeholder.nodeName != "IMG") return false;
	placeholder.setAttribute("src",source);
	// 检查description元素是否存在
	if (document.getElementById("description")) {
		// 检查title属性是否存在，利用三元操作符为找不到title属性时text变量的值为空字符串
		var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
		var description = document.getElementById("description");
		// 检查description元素的第一个子元素节点nodeType是否是文本节点
		if (description.firstChild.nodeType == 3) {
			description.firstChild.nodeValue = text;
		}	
	}
	return true;
}
// 网页链接的预处理函数需要在页面一加载完，就进行调用处理
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {  
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

运维个西瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript图片库样例的html与js分离，以及兼容性优化

javascript图片库样例的html与js分离，以及兼容性优化。学习JavaScript DOM编程艺术一书所做的一些笔记。gallery.html Image Gallery addLoadEvent(prepareGallery); Snapshots <!-- Fireworks Coffee Rose B
复制链接

扫一扫