百度下拉框推广网站,wordpress主题modown,网站空间送域名,中山网页设计将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是#xff0c;如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数据量就会变得相当可观。我们必须面对这样一个现实:没有人会等待很长长时间去下载一个网页;所以利…将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数据量就会变得相当可观。我们必须面对这样一个现实:没有人会等待很长长时间去下载一个网页;所以利用JavaScript来创建一个图片库将是最佳的选择 说下步骤: 第一步把整个图片库的链接都加载到图片库的主页里 第二步当用户点击对应的超链接时,拦截网页的默认行为,即(超链接点击跳转行为); 第三步当用户点击对应的超链接后,把占位符图片替换成那个超链接所对应的图片; 1、代码如下: 第一版: body
a hrefimg/index.jpg图片一/abr /a hrefimg/index.jpg οnclickshowPic(this);return false;图片一/abr /a hrefimg/index1.jpg οnclickshowPic(this);return false;图片二/abr /a hrefimg/index2.jpg οnclickshowPic(this);return false;图片三/abr /a hrefimg/index4.jpg οnclickshowPic(this);return false;图片四/ap----------------------------/pimg srcimg/blank.png altblank/script typetext/javascriptfunction showPic(whichpic) {var source whichpic.getAttribute(href); //获取目标元素的src属性;var placeholder document.getElementsByTagName(img); //获取占位符图片对象;placeholder.setAttribute(src, source); //图片替换}/script
/body 代码解析οnclickshowPic(this);return false; 这段代码表示给a/a标签添加了一个onclick事件处理函数,添加处理函数的语法如下所示:eventJavaScript 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图片库代码如下:第二版 bodya hrefjavascript:void(0); titleimg/index.jpg图片一/abr /a hrefjavascript:void(0); titleimg/index1.jpg图片二/abr /a hrefjavascript:void(0); titleimg/index2.jpg图片三/abr /a hrefjavascript:void(0); titleimg/index4.jpg图片四/ap----------------------------/pimg srcimg/blank.png altblank/script typetext/javascriptvar 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图片库增加一个新的功能:点击超链接把图片的描述显示到图片的下面代码如下第三版 bodya hrefjavascript:void(0); titleimg/index.jpg图片一/abr /a hrefjavascript:void(0); titleimg/index1.jpg图片二/abr /a hrefjavascript:void(0); titleimg/index2.jpg图片三/abr /a hrefjavascript:void(0); titleimg/index4.jpg图片四/ap----------------------------/pimg srcimg/blank.png altblank/br /p iddescription/pscript typetext/javascriptvar 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 iddescription/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 sourcewhichpic.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代码: bodydiv idimagegallerya hrefimg/index.jpg titledog_one图片一/abr /a hrefimg/index1.jpg titledog_two图片二/abr /a hrefimg/index2.jpg titledog_three图片三/abr /a hrefimg/index4.jpg titledog_four图片四/ap----------------------------/pimg srcimg/blank.png altblank /br /p iddescription/p/divscript srcpicLibrary.js typetext/javascript/script !--合理放置了JS脚本在加载完DOM后在加载JS脚本,提高了页面的加载速度,提现了内容优先的原则--
/body 在学习完JavaScript动态向文档中添加元素和内容后http://www.cnblogs.com/GreenLeaves/p/5730898.html 再重新回到我们的图片库,我们发现在我们的htm文档中有一个图片和一段文字是专门为showPic脚本服务的,若能把结构和行为分离自然是最好的既然这些元素的存在,是为了让DOM方法来处理它们,那么用DOM方法来创建他们才是最合适的选择。 第五版 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 xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8/title/title
/head
bodydiv idimagegallerya href../img/index.jpg titledog_one图片一/abr /a href../img/index1.jpg titledog_two图片二/abr /a href../img/index2.jpg titledog_three图片三/abr /a href../img/index4.jpg titledog_four图片四/a/divscript srcjsPic.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 xmlnshttp://www.w3.org/1999/xhtml
headtitle/titlescript src../js/utility.js typetext/javascript/script script src../js/index.js typetext/javascript/script
/head
bodydiv idimagegallerya href../img/index.jpg titledog_one图片一/abr /a href../img/index1.jpg titledog_two图片二/abr /a href../img/index2.jpg titledog_three图片三/abr /a href../img/index4.jpg titledog_four图片四/a/div
/body
/html 现在图片库真正的做到了,结构、样式和行为彻底分离; 不过、这里还可以做下改进将超链接的内容改成图片的缩略图、就是一个使用的图片库了。
