javascript dom代码应用 简单的相册[firefox only]
javascript dom代码应用 简单的相册[firefox only]
发布时间:2016-12-30 来源:查字典编辑
摘要:但我觉得这还不行,毕竟什么都是人家封装好的,得自己深入学习下原生的javascript才踏实。今天看到一篇不错的博文,介绍了一个基于jsdo...

但我觉得这还不行,毕竟什么都是人家封装好的,得自己深入学习下原生的javascript才踏实。今天看到一篇不错的博文,介绍了一个基于js dom编程的相册实例,虽然这个例子很小,但个人认为还是很有学习价值的,先给出html和效果图,这样有助于后面js的理解。

javascript dom代码应用 简单的相册[firefox only]1

复制代码 代码如下:

<body>

<div id="content">

<h1>Snapshots</h1>

<ul id="imagegallery">

<li>

<a href="photo/fireworks.jpg" title="A fireworks display">

<img src="photo/thumbnail_fireworks.jpg" alt="Fireworks" />

</a>

</li>

<li>

<a href="photo/coffee.jpg" title="A cup of black coffee">

<img src="photo/thumbnail_coffee.jpg" alt="Coffee" />

</a>

</li>

<li>

<a href="photo/rose.jpg" title="A red, red rose">

<img src="photo/thumbnail_rose.jpg" alt="Rose" />

</a>

</li>

<li>

<a href="photo/bigben.jpg" title="The famous clock">

<img src="photo/thumbnail_bigben.jpg" alt="Big Ben" />

</a>

</li>

</ul>

</div>

</body>

结构还是挺简单的,这里a元素的href属性值为要显示大图的路径,img为对应的小图。效果就是点击下面的小图,上面显示对应的大图。

下面给出js实现:

复制代码 代码如下:

<script type="text/javascript">

/*3相册代码的关键函数,传入参数为a元素*/

function showPic(whichpic) {

if(!document.getElementById("placeholder")) return true;

/*取得a元素的href*/

var source = whichpic.getAttribute("href");

var placeholder = document.getElementById("placeholder");

/*显示图片:让img元素的src变为a元素的href*/

placeholder.setAttribute("src",source);

if(!document.getElementById("description")) return false;

/*取得a元素的title*/

if(whichpic.getAttribute("title")) {

var text = whichpic.getAttribute("title");

} else {

var text = "";

}

/*将a元素的title赋给描述文字*/

var description = document.getElementById("description");

if(description.firstChild.nodeType == 3) {

description.firstChild.nodeValue = text;

}

return false;

}

/*2给所有的imagegallery的a添加上click事件响应函数*/

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;

}

}

/*添加load事件响应函数的函数*/

function addLoadEvent(func) {

var oldonload = window.onload;

if(typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

oldonload();

func();

}

}

}

/* 1.代码开始*/

function preparePlaceholder() {

if(!document.createElement) return false;

if(!document.createTextNode) return false;

/*创造一个img元素,设置它的属性*/

var placeholder = document.createElement("img");

placeholder.setAttribute("id", "placeholder");

placeholder.setAttribute("src", "photo/placeholder.gif");

placeholder.setAttribute("alt", "my image gallery");

/*创建一个段落,作为描述*/

var description = document.createElement("p");

description.setAttribute("id","description");

var desctext = document.createTextNode("choose an image");

description.appendChild(desctext);

/*imagegallery是文档里的ul*/

var gallery = document.getElementById("imagegallery");

/*将大图和描述文字插入文档*/

gallery.parentNode.insertBefore(placeholder, gallery);

gallery.parentNode.insertBefore(description, gallery);

}

/*为事件初始化*/

addLoadEvent(preparePlaceholder);

addLoadEvent(prepareGallery);

</script>

我们先看preparePlaceholder函数,在这个函数里创建了一个img元素placeholder,并设置了它对应的属性(id, src, alt),又创建了一个p元素description,p元素中用appendChild方法插入了一个文本节点用于给出照片的描述,初始为“choose an image”, 然后通过document.getElementById找到ul,并把生成的img和p插到图片列表之前。说明下insertBefore的用法,查了下Mozilla developer center:

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

insertedElement 其实就是newElement,作为一个返回结果

parentElement 是要插入的父级元素即插入哪个元素中

newElement 当然就是那个要插入的新元素啦

referenceElement 指要在哪个元素之前插入

我们接着看prepareGallery函数,它的作用是为每个a元素赋予一个单击事件,其中return showPic(this)默认返回的是false,是为了阻止点击a元素后的默认行为(直接到新页面显示图片)

下面是最核心的showPic函数,通过取得包裹对应小图片的a元素中的href 和 title属性值(href的值为小图片对应的大图片的路径),来为preparePlaceholder函数中生成的img设置src属性,和p中的描述文本,形成最终的效果。这里面有个nodeType,具体也可在Mozilla developer center中查到。

最后还有一个很有意思的函数就是addLoadEvent,很有意思...有递归的感觉,把事件函数像队列一样加了进去,然后顺次执行。

呵呵,这个相册就分析到这,这是我第一次发表博文,有什么不对或需要提高的地方,希望博友们多多指点,我会虚心接受的,谢谢。

代码打包下载

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类