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


Posted in Javascript onJune 12, 2010

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

<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 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 #Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 #Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 #Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 #Javascript
JavaScript中yield实用简洁实现方式
Jun 12 #Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 #Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
第十五节--Zend引擎的发展
2006/11/16 PHP
php URL验证正则表达式
2011/07/19 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
jQuery 操作XML入门
2008/12/25 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
Javascript实现单例模式
2016/01/24 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
让python json encode datetime类型
2010/12/28 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
pandas值替换方法
2018/07/10 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python中比较两个列表的实例方法
2019/07/04 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Python eval函数原理及用法解析
2020/11/14 Python
创意广告词
2014/03/17 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
个性与发展自我评价
2015/03/06 职场文书
总经理聘用协议书
2015/09/21 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis