JavaScript图片库
将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数据量就会变得相当可观。我们必须面对这样一个现实:没有人会等待很长长时间去下载一个网页;所以利用JavaScript来创建一个图片库将是最佳的选择;
说下步骤:
第一步:把整个图片库的链接都加载到图片库的主页里;
第二步:当用户点击对应的超链接时,拦截网页的默认行为,即(超链接点击跳转行为);
第三步:当用户点击对应的超链接后,把"占位符"图片替换成那个超链接所对应的图片;
1、代码如下:
第一版:
<body> <a href="img/index.jpg">图片一</a><br /><a href="img/index.jpg" οnclick="showPic(this);return false;">图片一</a><br /><a href="img/index1.jpg" οnclick="showPic(this);return false;">图片二</a><br /><a href="img/index2.jpg" οnclick="showPic(this);return false;">图片三</a><br /><a href="img/index4.jpg" οnclick="showPic(this);return false;">图片四</a><p>----------------------------</p><img src="img/blank.png" alt="blank"/><script type="text/javascript">function showPic(whichpic) {var source = whichpic.getAttribute('href'); //获取目标元素的src属性;var placeholder = document.getElementsByTagName('img'); //获取占位符图片对象;placeholder.setAttribute('src', source); //图片替换 }</script> </body>
代码解析:οnclick="showPic(this);return false;" 这段代码表示给<a></a>标签添加了一个onclick事件处理函数,添加处理函数的语法如下所示:event="JavaScript statement" JavaScript statement->方法体,this代表当前<a></a>标签对象。注意return false;表示阻止超链接跳转的默认行为;让我们了解一下DOM1中的事件处理函数的工作机制。在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会被执行。被调用的JavaScript就会返回一个值,这个值将被传递给那个事件处理函数。若返回的值是true,onclick事件处理函数就认为这个函数被点击了,若为false,就相反;所以加上return false,就可以防止用户被带到目标链接窗口;注意:return false;只在DOM1中适用;所以这段代码只会在支持DOM1标准的浏览器中才会有效,其他的浏览器任然会被带到目标窗口!关于这个bug暂时先放一放! 2、由于return false;在一些浏览器上可能看不出效果,所以我这边换了一种方式实现JS图片库;代码如下:第二版:
<body><a href="javascript:void(0);" title="img/index.jpg">图片一</a><br /><a href="javascript:void(0);" title="img/index1.jpg">图片二</a><br /><a href="javascript:void(0);" title="img/index2.jpg">图片三</a><br /><a href="javascript:void(0);" title="img/index4.jpg">图片四</a><p>----------------------------</p><img src="img/blank.png" alt="blank"/><script type="text/javascript">var a = document.getElementsByTagName('a');for (var i = 0; i < a.length; i++) {a[i].onclick = function () {showPic(this);}}function showPic(whichpic) {var source = whichpic.getAttribute('title'); //获取目标元素的title属性;var placeholder = document.getElementsByTagName('img')[0]; //获取占位符图片对象;placeholder.setAttribute('src', source); //图片替换 }</script> </body>
3、在学完nodeValue属性http://www.cnblogs.com/GreenLeaves/p/5695165.html#nodeValue后给JS图片库增加一个新的功能:点击超链接把图片的描述显示到图片的下面代码如下:第三版:
<body><a href="javascript:void(0);" title="img/index.jpg">图片一</a><br /><a href="javascript:void(0);" title="img/index1.jpg">图片二</a><br /><a href="javascript:void(0);" title="img/index2.jpg">图片三</a><br /><a href="javascript:void(0);" title="img/index4.jpg">图片四</a><p>----------------------------</p><img src="img/blank.png" alt="blank"/><br /><p id="description"></p><script type="text/javascript">var a = document.getElementsByTagName('a');for (var i = 0; i < a.length; i++) {a[i].onclick = function () {showPic(this);}}function showPic(whichpic) {var source = whichpic.getAttribute('title'); //获取目标元素的title属性;var placeholder = document.getElementsByTagName('img')[0]; //获取占位符图片对象;placeholder.setAttribute('src', source); //图片替换var description = document.getElementById('description');description.childNodes[0].nodeValue = source;}</script> </body>
注意:当html代码中<p id="description"></p>中没有空格的时候 这句代码会报错,description.childNodes[0].nodeValue = source;原因是此时的<p>标签之间并没有子节点,若在<p></p>标签之间加一个空格,这个空格就会被解析成<p>标签的子节点,即文本节点,这样description.childNodes[0].nodeValue = source;不会报错,功能完美实现;
4、在学习完JavaScript之最佳实践后http://www.cnblogs.com/GreenLeaves/p/5701873.htm
再次对JS图片库进行升级,这次升级的主要目的是:
1、使图片库能够平稳退化(即使Broswer禁用JavaScript网页仍能正常访问)
2、使图片库能向后兼容
3、分离JS代码到单独的JS文件
4、重构之前的JS代码提高JS代码的运行性能
5、合理的放置JS脚本
6、对象检测:即使老版本浏览器不支持DOM方法,网页仍能正常运行
7、关键元素的判断,即使关键元素缺失,网页仍能正常运行
第四版:
window.onload = prepareGallery; function prepareGallery() {if (!document.getElementById) return false;if (!document.getElementsByTagName) return false;//判断浏览器是否支持DOM方法防止浏览器不支持网页出现运行错误//判断id为imagegallery的元素是否存在,如果不存在的话网页任能正常运行if (document.getElementById("imagegallery")) {var gallery = document.getElementById("imagegallery");var links = gallery.getElementsByTagName("a"); //这里不加判断是因为如果你连图片都没有,何谈功能。for (var i = 0; i < links.length; i++) {links[i].onclick = function () {//showPic(this);//return false; 假设showPic方法没有出现问题,return false是正确的做法,但是万一shwPic出现了问题,这个时候返回false,点击超链接将没有任何反应,//所以这个地方这样该更好return !showPic(this); //如果showPic方法出现问题,超链接任然有效符合JavaSciprt平稳退化的要求; }}} } function showPic(whichpic) {if (!document.getElementsByTagName("img")[0]) return false;var source=whichpic.getAttribute("href");//获取图片的链接地址var placeholder = document.getElementsByTagName("img")[0];if (placeholder.nodeName != "IMG") return false;placeholder.setAttribute("src", source);if (!document.getElementById("description")) return false;var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //获取图片名称(判断图片超链接的文本节点(图片名称)是否存在)var description = document.getElementById("description");description.firstChild.nodeValue = text;return true; }
html代码:
<body><div id="imagegallery"><a href="img/index.jpg" title="dog_one">图片一</a><br /><a href="img/index1.jpg" title="dog_two">图片二</a><br /><a href="img/index2.jpg" title="dog_three">图片三</a><br /><a href="img/index4.jpg" title="dog_four">图片四</a><p>----------------------------</p><img src="img/blank.png" alt="blank" /><br /><p id="description"></p></div><script src="picLibrary.js" type="text/javascript"></script> <!--合理放置了JS脚本在加载完DOM后在加载JS脚本,提高了页面的加载速度,提现了内容优先的原则--> </body>
在学习完JavaScript动态向文档中添加元素和内容后http://www.cnblogs.com/GreenLeaves/p/5730898.html
window.onload = prepareGallery; function prepareGallery() {if (!document.getElementById) return false;if (!document.createElement) return false; if (!document.createTextNode) return false;if (!document.getElementsByTagName) return false;//判断浏览器是否支持DOM方法防止浏览器不支持网页出现运行错误//判断id为imagegallery的元素是否存在,如果不存在的话网页任能正常运行if (document.getElementById("imagegallery")) {var gallery = document.getElementById("imagegallery");var placeholder = document.createElement("img"); //创建一个图片展示容器placeholder.setAttribute("id", "placeholder");placeholder.setAttribute("src", "../img/blank.jpg");var description = document.createElement("p"); //创建描述description.setAttribute("id", "description");var desctxt = document.createTextNode("chose an image");description.appendChild(desctxt);var body = document.getElementsByTagName("body")[0];body.appendChild(placeholder);body.appendChild(description);var links = gallery.getElementsByTagName("a"); //这里不加判断是因为如果你连图片都没有,何谈功能。for (var i = 0; i < links.length; i++) {links[i].onclick = function () {//showPic(this);//return false; 假设showPic方法没有出现问题,return false是正确的做法,但是万一shwPic出现了问题,这个时候返回false,点击超链接将没有任何反应,//所以这个地方这样该更好return !showPic(this); //如果showPic方法出现问题,超链接任然有效符合JavaSciprt平稳退化的要求; }}} } function showPic(whichpic) {var source = whichpic.getAttribute("href");//获取图片的链接地址placeholder.setAttribute("src", source);var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //获取图片名称(判断图片超链接的文本节点(图片名称)是否存在)document.getElementById("description").firstChild.nodeValue = text;return true; }
html代码:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> </head> <body><div id="imagegallery"><a href="../img/index.jpg" title="dog_one">图片一</a><br /><a href="../img/index1.jpg" title="dog_two">图片二</a><br /><a href="../img/index2.jpg" title="dog_three">图片三</a><br /><a href="../img/index4.jpg" title="dog_four">图片四</a></div><script src="jsPic.js"></script> <!--合理放置了JS脚本在加载完DOM后在加载JS脚本,提高了页面的加载速度,提现了内容优先的原则--> </body> </html>
这个版本的图片库的结构和行为分离的已经很彻底了,但是还是有个问题,因为这里的图片链接列表刚好是<body>部分的最后一个元素,如果在这个图片列表之后还有其他的一些元素?我们该怎么做?我们最初的想法是想让新创建的元素紧紧的跟在图片清单的后面,而且不管清单出现在哪个位置。所以这个图片库的版本还有待改进!
在学了通过insertAfter()和insertBefore()向指定元素位置的地方加入元素之后http://www.cnblogs.com/GreenLeaves/p/5731614.html
我们结合之前所有的学习内容对JS图片库再做一次改进,代码如下:
第六版:
utility.js 公共库
/* window.onload事件(当页面加载完毕时需要调用的事件,也就是说当我们在开发中需要调用一些JS函数在页面加载完毕后执行的可以和这个事件绑定) 但是这个事件只能绑定一个函数,如果再次绑定原先的事件会被覆盖掉.所以这个方法就是将页面加载完毕之后需要的函数创建一个队列,然后将需要执行的函数一个个添加 到队列里面; @param func -需要添加到队列里面的函数 */ function addOnloadEvent(func) {var oldonload = window.onload;if (typeof window.onload != "function") {window.onload = func; //如果window.onload事件没有绑定任何function则正常绑定 }else {//如果window.onload事件已经绑定了函数,则在原来的基础上,继续添加新的函数window.onload = function () {oldonload();func();};} }/* addOnloadEvent的扩展版因为每次添加一个函数都需要调用addOnloadEvent()函数,所以为了节省代码,将需要绑定的函数名写入到一个数组里面, 然后将数组引用,传递给addOnloadEventlist();每次添加,只需将函数名,写到数组里面即可 @param eventlist -需要与window.onload事件绑定的函数名数组 */ function addOnloadEventlist(eventlist) {if (!eventlist) return false;var oldonload = window.onload;window.onload = function () {for (var i = 0; i < eventlist.length; i++) {eventlist[i]();}}}/* 向目标元素之后添加新的元素 @param newElement=新元素 @param targetElement=目标元素 */ function insertAfter(newElement, targetElement) {/*编写逻辑1、首先找到给出我们需要插入的元素和用来定位的目标元素2、根据目标元素找到两个元素的父元素3、判断目标元素是不是父元素内的唯一的元素.4、如果是,向父元素执行追加操作,就是appendChild(newElement)5、如果不是,向目标元素的之后的紧接着的节点之前执行inserBefore()操作*/var parentElement = targetElement.parentNode; //find parent elementif (parentElement.lastChild == targetElement)//To determime确定,下决心 whether the last element of the parent element is the same as the target element {parentElement.appendChild(newElement);} else {parentElement.insertBefore(newElement, targetElement.nextSibling);} }
index.js
function showPic(whichpic) {if (!document.getElementById("placeholder")) return false;if (!document.getElementById("description")) return false;var placeholder = document.getElementById("placeholder");var description = document.getElementById("description");var source = whichpic.getAttribute("href"); //获取图片的链接地址placeholder.setAttribute("src", source);var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //获取图片名称(判断图片超链接的文本节点(图片名称)是否存在)if (description.firstChild.nodeType == 3) {description.firstChild.nodeValue = text;}else {return false;}return true; }function preparePlaceholder() {if (!document.getElementById) return false;if (!document.createElement) return false;if (!document.createTextNode) return false;if (!document.getElementsByTagName) return false;//判断浏览器是否支持DOM方法防止浏览器不支持网页出现运行错误//判断id为imagegallery的元素是否存在,如果不存在的话网页任能正常运行if (document.getElementById("imagegallery")) {var gallery = document.getElementById("imagegallery");var placeholder = document.createElement("img"); //创建一个图片展示容器var description = document.createElement("p"); //创建描述var desctxt = document.createTextNode("chose an image");placeholder.setAttribute("id", "placeholder");placeholder.setAttribute("src", "../img/blank.png");description.setAttribute("id", "description");description.appendChild(desctxt);insertAfter(placeholder, gallery);insertAfter(description,placeholder);} } function prepareGallery() {if (!document.getElementById) return false;if (!document.getElementsByTagName) 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 () {//showPic(this);//return false; 假设showPic方法没有出现问题,return false是正确的做法,但是万一shwPic出现了问题,这个时候返回false,点击超链接将没有任何反应,//所以这个地方这样该更好return !showPic(this); //如果showPic方法出现问题,超链接任然有效符合JavaSciprt平稳退化的要求; }} } var eventlist = [preparePlaceholder, prepareGallery]; addOnloadEventlist(eventlist);
html文件:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script src="../js/utility.js" type="text/javascript"></script> <script src="../js/index.js" type="text/javascript"></script> </head> <body><div id="imagegallery"><a href="../img/index.jpg" title="dog_one">图片一</a><br /><a href="../img/index1.jpg" title="dog_two">图片二</a><br /><a href="../img/index2.jpg" title="dog_three">图片三</a><br /><a href="../img/index4.jpg" title="dog_four">图片四</a></div> </body> </html>
现在图片库真正的做到了,结构、样式和行为彻底分离;
不过、这里还可以做下改进,将超链接的内容改成图片的缩略图、就是一个使用的图片库了。
JavaScript图片库相关推荐
- Dom及JavaScript图片库
补充上一篇的内容: JavaScript中的对象可以分为三种类型: 1.用户定义的对象:由程序员自行创建的对象. 2.内建对象:内建在JavaScript中的对象,如Array,Mat ...
- JavaScript 第四课 案例研究:JavaScript图片库
主要内容: 编写一个优秀的标记文件 编写一个JavaScript函数以显示用户想要查看的内容 由标记出发函数调用 使用几个新方法扩展这个JavaScript函数 学习过DOM,我们用JavaScrip ...
- JavaScript DOM编程艺术小记(五)---第四章-JavaScript图片库(实例)
^编写一个优秀的标记文件 ^编写一个JavaScript函数以显示用户想要查看的图片 ^由标记触发函数调用 ^使用几个新方法扩展这个JavaScript函数 以下代码结合三四章内容 HTML文件 &l ...
- javascript图片库威力增强版
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 《JavaScript DOM编程艺术》学习回顾4
今天写到了这本书的第四章,这书的第四章主要是对一个例子进行研究,这个例子是JavaScript图片库,就是上边看到的这个网页图片库效果.把整个图片库的浏览链接集中安排图片库的网页里,只要用户点击了这个 ...
- JavaScript DOM编程艺术(第2版) 笔记
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 基本概念 1.JavaScript语法 1.1 JavaScript 代码的执行: 1.2 JavaScript 语句 1.3 ...
- JavaScript Dom编程艺术学习笔记(第4章)
案例研究:JavaScript图片库(待补充) (笔记并不覆盖章节所有内容,只记录个人认为的重点和难点) 一.DOM操作 placeholder.setAttribute("src" ...
- js语法+dom+js图片库+最佳实践+图片库改进版
[2]js语法 [2.2.4]数据类型 类型1)字符串 var mood = 'happy'; var moood = "happy"; 类型2)数值: var age = 33. ...
- 设计模式(10)[JS版]-JavaScript如何实现组合模式???
目录 1 什么是组合模式 2 主要参与者 3 代码实现 4 应用实例 4.1 表单验证 4.1 图片阅读器 5 总结 1 什么是组合模式 组合模式允许创建具有属性的对象,这些对象是原始项目或对象集合. ...
最新文章
- CISCO路由器配置手册--第五章 虚拟局域网(VLAN)路由
- ABAP Write 宝典
- YUI3下widget的plugin开发
- (论文阅读笔记1)Collaborative Metric Learning(一)(WWW2017)
- php如何定义变量,它和c# 等语言有什么不同呢?,PHP 变量和常量的定义
- (转)switch与ifelse的效率问题 .
- android 语音库,安卓系统也能用苹果语音库:Vocalizer TTS语音引擎及语音包合集
- Jmeter安装及配置
- forge是用java装吗_我的世界forge怎么安装 forge使用方法
- PolyCluster: Minimum Fragment Disagreement Clustering for Polyploid Phasing 多聚类:用于多倍体的最小碎片不一致聚类...
- 鸡年年终总结汇报PPT模板
- html编写购物网站页面练习(一)
- 给有从事软件研发想法的在校大学生的一丝建议
- 智能手机全球普及率今年有望达到63%
- msp430单片机c语言应用程序,MSP430单片机C语言应用程序设计实例精讲
- python画哆啦a梦图片_80行代码!用Python做一个哆来A梦分身
- js台阶算法问题(上台阶模拟器)
- ESP8266-01S型号WIFi模块学习使用笔记
- DDOS攻击器常见的三种DDoS攻击方式详解
- IT老兵不死:柳传志隐退留下三大愿景
热门文章
- 面对 this 指向丢失,尤雨溪在 Vuex 源码中是怎么处理的
- 程序员如何面试才能拿到offer
- 9月11日学习内容整理:正则表达式,re模块
- 腾讯2016春招之算法编程解析
- C++11模版元编程的应用
- java操作redis简单学习3
- 《奠基计算机网络》清华大学出版社 之 IPv6和IPv4共存技术
- java byte转bigdecimal_Java BigDecimal byteValueExact()用法及代码示例
- Factory Method工厂方法
- 本周ASP.NET英文技术文章推荐[03/25 - 03/31]