javascript dom代码应用 简单的相册[firefox only]
发布时间：2016-11-24 03:33:47 所属栏目：Unix 来源：站长网
导读：但我觉得这还不行，毕竟什么都是人家封装好的，得自己深入学习下原生的javascript才踏实。今天看到一篇不错的博文，介绍了一个基于js dom编程的相册实例，虽然这个例子很小，但个人认为还是很有学习价值的，先给出html和效果图，这样有助于后面js的理解。nb
但我觉得这还不行，毕竟什么都是人家封装好的，得自己深入学习下原生的javascript才踏实。今天看到一篇不错的博文，介绍了一个基于js dom编程的相册实例，虽然这个例子很小，但个人认为还是很有学习价值的，先给出html和效果图，这样有助于后面js的理解。nbsp; nbsp;nbsp;nbsp;nbsp;复制代码 代码如下: lt;bodygt; lt;div id="content"gt; lt;h1gt;Snapshotslt;/h1gt; lt;ul id="imagegallery"gt; lt;ligt; lt;a href="photo/fireworks.jpg" title="A fireworks display"gt; lt;img src="photo/thumbnail_fireworks.jpg" alt="Fireworks" /gt; lt;/agt; lt;/ligt; lt;ligt; lt;a href="photo/coffee.jpg" title="A cup of black coffee"gt; lt;img src="photo/thumbnail_coffee.jpg" alt="Coffee" /gt; lt;/agt; lt;/ligt; lt;ligt; lt;a href="photo/rose.jpg" title="A red, red rose"gt; lt;img src="photo/thumbnail_rose.jpg" alt="Rose" /gt; lt;/agt; lt;/ligt; lt;ligt; lt;a href="photo/bigben.jpg" title="The famous clock"gt; lt;img src="photo/thumbnail_bigben.jpg" alt="Big Ben" /gt; lt;/agt; lt;/ligt; lt;/ulgt; lt;/divgt; lt;/bodygt; 结构还是挺简单的，这里a元素的href属性值为要显示大图的路径，img为对应的小图。效果就是点击下面的小图，上面显示对应的大图。 下面给出js实现： 复制代码 代码如下: lt;script type="text/javascript"gt; /*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 lt; 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); lt;/scriptgt; 我们先看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 指要在哪个元素之前插入 nbsp;nbsp;nbsp; 我们接着看prepareGallery函数，它的作用是为每个a元素赋予一个单击事件，其中return showPic(this)默认返回的是false，是为了阻止点击a元素后的默认行为（直接到新页面显示图片） nbsp;nbsp;nbsp; 下面是最核心的showPic函数，通过取得包裹对应小图片的a元素中的href 和 title属性值（href的值为小图片对应的大图片的路径），来为preparePlaceholder函数中生成的img设置src属性，和p中的描述文本，形成最终的效果。这里面有个nodeType，具体也可在Mozilla developer center中查到。 nbsp;nbsp;nbsp; 最后还有一个很有意思的函数就是addLoadEvent，很有意思...有递归的感觉，把事件函数像队列一样加了进去，然后顺次执行。 nbsp; nbsp; 呵呵，这个相册就分析到这，这是我第一次发表博文，有什么不对或需要提高的地方，希望博友们多多指点，我会虚心接受的，谢谢。 （编辑：温州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
