JavaScript中图片库的示例分析
这篇文章将为大家详细讲解有关JavaScript中图片库的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联建站是一家专注于成都网站设计、网站建设与策划设计,巴南网站建设哪家好?创新互联建站做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:巴南等地区。巴南做网站价格咨询:028-86922220
一、一个javascript 图片库实例,下面是效果图
点击顶部导航,会在本页面进行刷新图片,然后,在底部会显示文本的变化
二、下面是代码
1、gallery.html代码
Snapshots
Choose an image
2、showPics.js代码
function showPic(whichpic){ var sorce=whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",sorce); var text=whichpic.getAttribute("title"); var description=document.getElementById("description"); description.firstChild.nodeValue=text; }
3、layout.css代码
img{ width: 600px; } body{ font-family: helvetica,arial,serif; color: #333; background-color: #ccc; margin: 1em 10%; } h2{ color:#333; background-color: transparent; } a{ color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul{ padding: 0; } li{ float: left; padding: 1em; list-style: none; } img{ display: block; clear: both; }
三、几个新的DOM属性
1、childNodes
获得 body 元素的子节点集合:
document.body.childNodes;
2、nodeType
获得 body 元素的节点类型:
document.body.nodeType;
3、nodeValue
nodeValue 属性设置或返回指定节点的节点值。
4、firstChild、lastChild
firstChild 属性返回指定节点的首个子节点,以 Node 对象。
lastChild 属性返回指定节点的最后一个子节点,以 Node 对象。
关于“JavaScript中图片库的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网页题目:JavaScript中图片库的示例分析
URL链接:http://scyanting.com/article/ggjcsi.html