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 相关文章推荐
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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中把有符号整型转换为无符号整型方法
2015/05/27 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
告诉大家什么是JSON
2008/06/10 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
js DOM的学习笔记
2011/12/22 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
MySQL面试题
2014/01/12 面试题
营销与策划个人求职信
2013/09/22 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python