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

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


代码如下:

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

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

赞 (0)

相关推荐

  • JS 相册效果 自动播放[本地整合]

    JS 相册效果 自动播放[本地整合]

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 可控制渐隐渐现: Previous Next Play Stop function tM(Message) { $("testMessage").innerHTML=Message } function dR(topr) { document.write(topr) } function $(eleId) {return document.getElementById(eleId)} //预载图片 var imasrc=new

  • jQuery 网易相册鼠标移动显示隐藏效果实现代码

    jQuery 网易相册鼠标移动显示隐藏效果实现代码

    其实主要是jquery 层选择器的应用,jquery 高手可以跳过... 网易相册效果图如下:当鼠标移动经过照片就显示"设为封面|删除",移开后就隐藏,此效果在web开发中经常会用到.故总结一下 直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • 基于spring+hibernate+JQuery开发之电子相册(附源码下载)

    基于spring+hibernate+JQuery开发之电子相册(附源码下载)

    项目结构: 项目首页: 注册页面: 上传图片: 效果图一: 效果图二: 效果图三: ============================================================= 下面是代码部分 ============================================================= 需要用到的数据库SQL: 复制代码 代码如下: drop database if exists db_ajax; create database db_

  • javascript椭圆旋转相册实现代码

    javascript椭圆旋转相册实现代码

    功能说明: 1.支持自动和手动两种模式:自动模式下自动旋转展示,手动模式下通过鼠标选择当前图片,或通过提供的接口选择上一张/下一张图片. 2.可自行添加旋转的缓动模式,默认模式为:匀速,先快后慢,先慢后快. 3.可自定义旋转轨迹的宽和高. 4.支持IE6 7 8 9 10 firefox chrome等浏览器. 效果预览: 实现原理: 根据对图片在椭圆轨迹上的运动,动态改变缩放大小,实现立体的视觉效果. 代码分析: 复制代码 代码如下: init:function(id,options){ va

  • 收集的10个免费的jQuery相册

    收集的10个免费的jQuery相册

    这里和大家分享一些很棒的网页照片相册.是由Tympanus通过jQuery来实现的.或许在网络上你已经见过数百种通过jQuery实现的相册,但是我们发现的这些相册,他们有额外的东西,优雅和独特的创意!每个相册都是可在线预览和免费下载的.你可以为你的Web项目添加色彩. 498)this.width=498;" border=0> 我们将看到这10个jQuery相册: 1. Photobie宝丽画廊 498)this.width=498;" border=0> 下载:http

  • asp javascript picasa相册外链批量导出

    来与大家分享.稍加改造就可以实现更强大的功能了.用下面的代码就可以简单的批量导出picasa相册的外链了. 复制代码 代码如下: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <%     dim xmlget,xmlhttp,email,paswd     email="youremail"    '输入picasa的账户email     paswd="yourpassword

  • 非常漂亮的相册集 使用jquery制作相册集

    非常漂亮的相册集 使用jquery制作相册集

    一.简单的图像翻滚 image-rollover常被用在交互式导航栏上,当我们的鼠标移动到导航栏时,按钮的外观改变.例如我们以如下几幅黑白缩略图作为导航图表,当鼠标移动到指定图标时,图标变为明亮的彩色图片.预览如下: 该页面的代码十分简单,我们以此为例逐步实现图像的翻滚: img-rollover.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • 23个超流行的jQuery相册插件整理分享

    23个超流行的jQuery相册插件整理分享

    这些jQuery插件包括演示.文档说明等,欣赏吧! 1. Galleriffic 下载与文档 查看演示 2. jPhotoGrid 下载与文档 查看演示 3. Galleria 下载与文档  查看演示 4. YoxView 下载与文档 查看演示 5. Micro Image Gallery 下载与文档 查看演示 6. AD Gallery 下载与文档 查看演示 7. slideViewerPro 下载与文档 查看演示 8. Galleryview 下载与文档 查看演示 9. Pikachoose

  • js相册效果代码(点击创建即可)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

随机推荐