JavaScript 建立简单的图片库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/boy.jpg" title="A hansome boy">Boy</a>
</li>
<li>
<a href="images/cup.jpg" title="A cup of coffee"> Coffee </a>
</li>
<li>
<a href="images/yellow.jpg" title="Two yellow guy"> Guy </a>
</li>
<li>
<a href="images/fathergirl.gif" title="fight"> Father and girl </a>
</li>
</ul>
</body>
</html>
如上所示，在同目录中的images文件夹中放入你想展示的图片，利用href建立连接路径，如果想查看，点击便能下载图片观看，避免了一次下载缓冲过多的图片导致网页速度过慢，但这样做每次都得按back返回很不方便，我们要写个showPic函数使得用户点击连接能在当前页面展示图片：
1、通过增加一个“占位符”图片的方法来为图片预留一个浏览区域：
<li>
<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />
</li>
通过更改images文件夹里的一张图片名字为placeholder作为占位符或者新加一张进去，用id表示出这张图片以便后边的设置它的链接属性。
2、在点击某个连接时，拦截网页的默认行为：
onclick="return false;"
3、在点击某个链接时，把"占位符“图片替换为与那个连接相对应的图片：
创建一个showPic.js文件，定义showPic函数如下：
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
并在html里引用该函数：
<script type="text/javascript" src="scripts/showPic.js"></script>
于</body>之前；
最终代码：
//gallary.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href = "http://www.baidu.com" onclick="return false;">Click me</a>
</li>
<li>
<a href="images/boy.jpg" onclick="showPic(this);return false;" title="A hansome boy">Boy</a>
</li>
<li>
<a href="images/cup.jpg" onclick="showPic(this); return false;" title="A cup of coffee"> Coffee </a>
</li>
<li>
<a href="images/yellow.jpg" onclick="showPic(this); return false;" title="Two yellow guy"> Guy </a>
</li>
<li>
<a href="images/fathergirl.gif" onclick="showPic(this); return false;" title="fight"> Father and girl </a>
</li>
<li>
<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />
</li>
</ul>
<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>
//showPic.js
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
大功告成!
期间遇到了一直无法修改属性的问题：
主要问题是拼写错误。。。。
还有尽量避免在等号两旁加空格，貌似最后一次把空格都去掉后就成功了。。。也只能归咎是这个格式问题了
扩展：切换显示不同的文本？
1、childrenNodes 属性可以 用来获取任何一个元素的所有子元素
写一个查看子元素个数的函数：
function countBodyChildren() {
var body_element = document.getElementsByTagName("body")[0];
alert ("the childNodes 's number: " + body_element.childNodes.length);
}
window.onload = countBodyChildren;
2、nodeType属性：返回节点的属性值：1为元素节点 2为属性节点 3为文本节点
3、nodeValue属性：获取一个节点的值：
注意：包含在<p>元素里面的文本是另一种节点，它是<P>元素的第一个子节点，因此想得到它的第一个子节点的nodevalue属性值：
alert（description.childnode[0].nodevalue);
用getAttribute来获得title的值，将它赋给description的第一个子节点的值，代码如下：
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var source_2 = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.childNodes[0].nodeValue = source_2;
}
最后，可以写一个样式表，将CSS代码存入layout.css文件，放入styles文件夹里，在<head>部分用一个<link>标签引用这文件：
<link rel="stylesheet" href="styles/layout.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:;
}
li {
float: left;
padding:1em;
list-syle: none;
}
img {
display:block;
clear:both;
}
layout.css
JavaScript 建立简单的图片库的更多相关文章
- php建立简单的用户留言系统
php建立简单的用户留言系统 样例 addMsg.php--添加留言页面 doAction.php--响应添加留言页面 . viewMsg.php--显示留言页面 目录结构 addMsg.php--添 ...
- JavaScript设置简单的自动时间
下面就是一段简单的JavaScript设置简单的自动时间,时间显示在一个输入框input里面. <html> <head> </head> <body> ...
- Javascript的简单测试环境
在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...
- javaScript(2)---简单使用
javaScript(2)---简单使用 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一.创建一张HTML页面 <!DOCTYPE ...
- Javascript学习-简单测试环境
Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...
- 【Css】一个简单的图片库
今天做一个简单的图片库! 其实这个在w3school教程里介绍得很好了,不过看到什么,自己动手做一次,记得也深刻不是. 我们分几步来走: 第一步:先写一个坯子. <html> <he ...
- JavaScript中简单排序总结
JavaScript中简单排序总结 冒泡排序 经典排序算法, 双重for循环 在第二个for循环的时候, j < arr.len -1 -i , 这一步的优化很重要 function bullS ...
- JavaScript 实现简单的 弹出框关闭框
JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...
- 用javascript实现简单的用户登录验证
用javascript实现简单的用户登录验证 <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- 302. Smallest Rectangle Enclosing Black Pixels
题目: An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. The b ...
- 解决javascript加减乘除及toFixed的误差问题
//用于替换原有的toFixed,解决精度误差问题 Number.prototype.myToFixed=function(s){ if(s == null){s = 0;} var value = ...
- Maven下使用Jetty进行Debug
1.环境和条件 Maven-3.0.3Eclipse请阅读者事先具备一定maven知识 2 配置2.1 添加Jetty插件 在pom.xml中加入如下代码段 <plugin> <gr ...
- c#换ip代理源码
很多朋友都想如何提高自己的网站流量,可是都没有什么好的办法 经过很长时间的研究,在C#中实现了,当然了,这部分代码其中一部分是网上的,不是原创. using System; using System. ...
- phpcms上线步骤，无法生成缓存，页面空白原因
缓存目录没有设置成777. 1.修改数据库配置 2.修改数据表中的本地地址成线上地址 3.修改代码中的配置,本地地址批量改为线上地址 4.登录后台,更新缓存
- 在maven项目中使用mybatis-generator-maven-plugin生成mybatis代码
项目整体的目录结构如下: pom.xml如下: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
- UVa 12174 (滑动窗口) Shuffle
首先预处理一下以每个数为结尾的前s个数是否能构成一个1~s的排列. 可以用cnt数组来记录每个数出现的次数和用一个变量记录一共有多少个不同的数出现. 然后枚举每种可能的情况,也就是枚举第一首歌会出现的 ...
- 【转】很有用但鲜有人知的 Linux 命令
Linux命令行吸引了大多数Linux爱好者.一个正常的Linux用户一般掌握大约50-60个命令来处理每日的任务.Linux命令和它们的转换对于Linux用户.Shell脚本程序员和管理员来说是最有 ...
- HDU 1023 Train Problem II (卡特兰数，经典)
题意: 给出一个数字n,假设火车从1~n的顺序分别进站,求有多少种出站序列. 思路: 卡特兰数的经典例子.n<101,用递推式解决.需要使用到大数.n=100时大概有200位以下. #inclu ...
- margin collapse 之父子关系的DIV
打算花点时间将知识整理一下,虽然平时现用现查都能完成工作,可是当遇到面试这种事情的时候,临时查就来不及了... 关于margin,整理若干知识点如下: 一:父子关系的DIV标签以及未加margin时的 ...