javascript dom代码应用 简单的相册[firefox only]_图象特效

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

复制代码 代码如下:

Snapshots

• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  

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

复制代码 代码如下:

我们先看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，很有意思...有递归的感觉，把事件函数像队列一样加了进去，然后顺次执行。

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