JavaScript 建立简单的图片库

时间：2022-02-09 03:37:58
<!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"

全部代码如下：

showPic.js
gallary.html
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 建立简单的图片库的更多相关文章

  1. php建立简单的用户留言系统

    php建立简单的用户留言系统 样例 addMsg.php--添加留言页面 doAction.php--响应添加留言页面 . viewMsg.php--显示留言页面 目录结构 addMsg.php--添 ...

  2. JavaScript设置简单的自动时间

    下面就是一段简单的JavaScript设置简单的自动时间,时间显示在一个输入框input里面. <html> <head> </head> <body> ...

  3. Javascript的简单测试环境

    在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...

  4. javaScript&lpar;2&rpar;---简单使用

    javaScript(2)---简单使用 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一.创建一张HTML页面 <!DOCTYPE ...

  5. Javascript学习-简单测试环境

    Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...

  6. 【Css】一个简单的图片库

    今天做一个简单的图片库! 其实这个在w3school教程里介绍得很好了,不过看到什么,自己动手做一次,记得也深刻不是. 我们分几步来走: 第一步:先写一个坯子. <html> <he ...

  7. JavaScript中简单排序总结

    JavaScript中简单排序总结 冒泡排序 经典排序算法, 双重for循环 在第二个for循环的时候, j < arr.len -1 -i , 这一步的优化很重要 function bullS ...

  8. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

  9. 用javascript实现简单的用户登录验证

    用javascript实现简单的用户登录验证 <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. 第一次正式小用Redis存储

    由于要做一个同一个页面上多种图表数据的下载,考虑到Azure上面的session很不稳定(可用Redis provider存储session,较稳定),故决定改为Azure支持的Redis,顺便也学习 ...

  2. Android 使用AIDL调用外部服务

    好处:多个应用程序之间建立共同的服务机制,通过AIDL在不同应用程序之间达到数据的共享和数据相互操作, 本文包括: 1 .创建AIDL 服务端.2 .创建AIDL 客户端. 3.客户端调用服务端提供的 ...

  3. a&plus;b&lpar;高精度）&lbrack;陈涛&rsqb;——c语言

    #include<stdio.h>#include<string.h>char s[1000];---------------------------------------- ...

  4. 从创建webservice到发布webservice的一些相关总结

    最近做了一个web服务,开始什么也不懂,就在网上到处找,对于刚毕业的我,感觉没用实际代码经过自己的手写出来,看什么都一头雾水,然后就看到很多人说webservice已经融入WCF..然后就先创建了WC ...

  5. Effective C&plus;&plus;规定45 额外的代码

    这部分是额外的代码博客,关键45术语思想已经实现. #include<iostream> using namespace std; template<typename T> c ...

  6. IOC 在Mvc中的使用

    IOC 在Mvc中的使用 IOC,是控制反转(Inversion of Control)的英文简写, 控制反转一般分为两种类型,依赖注入(Dependency Injection)和依赖查找(Depe ...

  7. Circle

    Circle   Memory Limit: 32768KB   64bit IO Format: %lld & %llu Status Description Your task is so ...

  8. leetcode算法题整理

    一.线性表,如数组,单链表,双向链表 线性表.数组 U1.有序数组去重,返回新数组长度 A = [1,1,2] -> [1,2] 返回2   分析:其实一般数组的问题都可以用两个指针解决,一个指 ...

  9. Ext&period;define细节分析

    自己写的其实还是不懂,再看看别人写的吧Extjs4 源码分析系列一 类的创建过程https://www.cnblogs.com/creazyguagua/p/4302864.htmlhttp://ww ...

  10. Core 中 Filter 中相关处理

    //返回401 ContentResult Content = new ContentResult(); Content.StatusCode = 401; filterContext.Result ...

相关文章