js图片库——改进版
来源:互联网 发布:金智妍kei知乎 编辑:程序博客网 时间:2024/06/05 09:28
《JavaScript+DOM编程艺术》一书作者给前端程序员的忠告:
1)留后路:在浏览器禁用js的时候基本功能要保证。href要设置成真实存在的url,慎用javascript伪协议,慎用弹窗。
2)分离javascript:js代码单独写入一个文件,减少它对html的依赖,在html中尽量去引用它,而不是直接插入js。
3)向后兼容:充分照顾旧版本的浏览器,在实现一些功能的时候多做判断。
在此基础上对小项目的修改(原来的版本:http://blog.csdn.net/lishichengyan/article/details/77759324)
1)html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Image Gallery</title><script type="text/javascript" src="scripts/showPic.js"></script><link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/></head><body><h1>Famous Paintings</h1><ul id="imagegallery"><li><a href="images/snowstorm.jpg" title="snow storm by Turner">Snowstorm</a></li><li><a href="images/sunflowers.jpg" title="sunflowers by van Gogh">Sunflowers</a></li><li><a href="images/selfportrait.jpg" title="double self portrait by Schiller">Selfportrait</a></li><li><a href="images/traveller.jpg" title="an oil painting by Caspar David Friedrich">Traveller</a></li></ul><img id="placeholder" src="images/placeholder.jpg" alt="my image gallery"/><p id="description">Choose an image.</p></body></html>2)css:
body{font-family:"Helvetica","Arial",serif;/*设置字体*/color:#333;background-color:#ccc;margin:1em 10%;/*设置四个边距,顺序是:上右下左*/}/*h1{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;}*/#imagegallery{list-style:none;}#imagegallery li{display:inline;}#imagegallery li a img{border:0;}
3)js:
window.onload=function(){prepareGallery();}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);}}}function showPic(whichpic){if(!document.getElementById("placeholder")) return true;var source=whichpic.getAttribute("href");var placeholder=document.getElementById("placeholder");if(placeholder.nodeName!="IMG") return true;placeholder.setAttribute("src",source);//注意source不要用""if(!document.getElementById("description")) return false;var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";var description=document.getElementById("description");if(description.firstChild.nodeType==3){description.firstChild.nodeValue=text;}return false;}运行效果:
阅读全文
0 0
- js图片库——改进版
- 案例研究:图片库改进版
- Js Dom 第六章 图片库的改进
- JS DOM 编程艺术(第2版)读书笔记 第6章 图片库改进版
- 案例研究:图片库改进版(js dom编程艺术第六章笔记)
- 第六章 案例研究 图片库改进版
- js图片库二次改进(动态创建HTML元素)
- #6图片库改进
- Javascript DOM(第二版) 案例研究:图片库改进版
- JavaScript Dom编程艺术-C6 案例研究:图片库改进版
- 【JavaScript DOM编程艺术】- 案例研究:图片库改进版
- javascript dom编程艺术读书笔记之图片库改进版
- js基础图片库
- JavaScript DOM编程艺术 学习笔记(六)图片库改进版
- web前端之JavaScript DOM编程艺术之案例研究:图片库改进版
- 《DOM编程艺术》四、图片库改进
- javascript 基础 增强版JS图片库 平稳退化
- spacegallery—富有空间感的图片库插件
- MTU & MSS 详解记录(转)
- 一只可爱的c++爬虫
- 回车执行js函数实现ajax调用
- search-a-2d-matrix
- systick使用出错总结
- js图片库——改进版
- bzoj 5018: [Snoi2017]英雄联盟
- EU4-53: Making a proposal
- Notepad++ 快捷键
- Android studio gradle版本更新和APP运行配置
- Spring_day02
- R语言:ggplot做条形图和线图尝试
- 小白做四轴前篇(1)-心中的梦
- EU4-54: Writing a short business proposal