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


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

复制代码 代码如下:

<body>
<div id="content">
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="photo/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,很有意思...有递归的感觉,把事件函数像队列一样加了进去,然后顺次执行。

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


« 
» 

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3