欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用Javascript实现图片库的平稳退化

程序员文章站 2023-12-31 13:38:22
...

虽然在JavaScript中由于之前版本导致的滥用问题，以致让JavaScript落下了一个特别不好的名声。

从这些观察结果可以看出，JavaScript 已经达到以下这些成为一流编程语言的标准：

  • 被创业公司和大型公司用作后端服务框架（NodeJS）

  • 有一个蓬勃发展的开源社区（在 GitHub 上最活跃）

  • 作为一门专业技能，有大量的招聘需求中要求掌握 JavaScript 的知识（Indee.com）

话不多少，我们上代码：

我们需要三个文件，分别为：js文件：处理事件；css文件：实现样式；html文件：进行页面布局

分别存储在三个文件夹中：scripts、styles、html。

pic.html文件 <!DOCTYPE html> <html>

<head> <title>Picture</title> </head> <body id="body"> <h1>Snapshots</h1> <ul id="imageGallery"> <li> <a href= "../images/1.jpg" title="hongbao" onclick="showPic(this);return false;">微信红包</a> </li> <!-- --> <li> <a href="../images/2.png" title="dingdanjietu" >订单截图</a> <!-- onmousemove ="showPic(this);return false;" onmouseleave="Back(this)" onclick="showPic(this);return false;" --> </li> <li> <a href="../images/top250.png" title="doubandianying" >豆瓣电影</a> <!-- onmousemove ="showPic(this);return false;" onmouseleave="Back(this)" --> </li> <li> <a href="../images/tuijian.jpg" title="tuijian" >网易云推荐</a> <!-- onclick="showPic(this);return false;" --> </li> </ul> <img src="../images/12.jpg" id="placeholder" alt="my image gallery" height="333px" width="333px"> <p id="description">Choose an image!</p> <script type="text/javascript" src="../scripts/showPic.js"></script> <link rel="stylesheet" type="text/css" href="../styles/pic.css"> </body> </html>
showPic.js文件
// alert("hello world");
//如果有两个函数需要再加载的时候执行，如果我们只是罗列他们那么将只会执行第二个。或者是最后一个。
//我们可以使用毙命的函数对他们及逆行包括。

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

addLoadEvent(countBodyChildren);
addLoadEvent(prepareGallery);


//定义一个函数，将一个函数添加到onload中
function addLoadEvent(Afunction) {
	var oldonload = window.onload;
	if(typeof window.onload != "function") {
		window.onload = Afunction;
	}else{
		window.onload = function() {
			oldonload();
			Afunction();
		}
	}
}

//展示图片并且可以将描述信息替换掉
function showPic(whichpic) {
	//获取到当前的对象的href值

	//判断是否有Id为placeholder的元素
	if(!document.getElementById("placeholder")) return false;
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	// placeholder.setAttribute("src", source);
	placeholder.src = source;
	//判断是否存在Id为description的元素
	// if(document.getElementById("description")) {
	// 	if (!whichpic.getAttribute("title")) {
	// 		var text = whichpic.getAttribute("title");	
	// 	}else{
	// 		return text = "";
	// 	}
	// 	// var text = whichpic.getAttribute("title")? whichpic.getAttribute("title"):"";

	// 	var description = document.getElementById("description");
	// 	description.firstChild.nodeValue = text;	//修改节点的值
	// }
	// return true;

	if(document.getElementById("description")) {
		var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
		var description = document.getElementById("description");
		if(description.firstChild.nodeType == 3) {
			description.firstChild.nodeValue = text;
		}
	}
	return true;
}

//之前定义的，如果我们的鼠标从选定的a上面移开之后，执行的的back函数
function Back(whichpic) {
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	// placeholder.setAttribute("src", source);
	placeholder.src = "../images/12.jpg";
}

//查看body元素下第一个子元素的节点类型
function countBodyChildren() {
	//返回数组时，我们使用getElementsByTagName
	var body_element = document.getElementsByTagName("body")[0];
	alert(body_element.nodeType);
}

//将原本位于各个a标签中的onclick动作事件，统一放在js文件中，
//进行分离并且判断是否可以使用JavaScript，保证平稳退化
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);
		}	
	}
}


pic.css文件
body {
	font-size: "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;
}

img {
	display: block;
	clear: both;
}
由此实现的图片库，进行了javascripts库的判断，如果不支持其中的一部分内容我们将不执行相应的函数代码，而是使用原有的链接进行跳转。是我们的图片库更加稳固。




上一篇：

下一篇：

推荐阅读