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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
angularJS中router的使用指南
Feb 09 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
详解vue 图片上传功能
Apr 30 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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
一篇入门的php Class 文章
2007/04/04 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
Python线程的两种编程方式
2015/04/14 Python
详解Python中的条件判断语句
2015/05/14 Python
python中引用与复制用法实例分析
2015/06/04 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
触摸春天教学反思
2014/02/03 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
化学专业自荐信
2014/05/28 职场文书
义卖募捐活动总结
2015/05/09 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
Python进程间的通信之语法学习
2022/04/11 Python