思路：

无序列表加载图片文件。用img标签加载一张图片作为占位符。当点击照片链接时，改变<a>元素的href属性。并且阻止浏览器的默认行为。

动态改变描述文字，在图片下方增加P标签。通过获取p标签内容，换成图片的title属性。

用到JS的DOM属性：

childNodes：获取父节点下的所有子节点

nodeType：节点属性

{

元素节点的属性值是：1；

属性节点的属性值是：2；

文本节点的属性值是：3；

}

nodeValue    改变文本节点的值（p元素本身是null值，获取p元素子节点其实是第一个子节点的nodeValue值）

firstChild   第一个子元素

lastChild    第二个子元素.

源码：

<body>

 <h1>Snapshots</h1>

    <ul>

       <li><a href="bassist.jpg" title='第一张' onclick='showpic(this); return false;' >bassist</a></li>

       <li><a href="concert.jpg" title='第二张' onclick='showpic(this); return false;'>concert</a></li>

       <li><a href="crowd.jpg" title='第三张' onclick='showpic(this); return false;'>crowd</a></li>

       <li><a href="guitarist.jpg" title='第四张' onclick='showpic(this); return false;'>guitarist</a></li>

   </ul>

   <img id='placeholder' src="placehoder.jpg" >

   <p id='description'>choose an img </p>

</body>

编写showpic函数：

Function showpic（whichpic）{

         Var placeholder   = document.getElementById(‘placeholder’);

         Var souce = whichpic.getAttribute(‘href’);

         Placeholder.setAttribute(‘src’,’souce’);

         Var text = whichpic.getAttribute(‘title’);

         Var description = document.getElementById(‘description’);

         description.firstChild.nodeValue = text

}

总结：

重点在于事情处理函数，因为showpic需要一个参数，：一个带有href属性的元素节点参数，所以当把onclick事件处理函数嵌入到一个链接中时，需要把这个链接本身用作showpic函数的参数，所以要使用‘ this’关键字。

效果：

Javascript实现图片库效果的更多相关文章

  1. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  3. JavaScript之放大镜效果2

    在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...

  4. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  5. JavaScript实现动画效果

    说到JavaScript实现动画效果,不得不想到两个函数,setTimeout和setInterval. setTimeout的常用的使用方法为 setTimeout(callback, delay) ...

  6. javascript瀑布流效果

    javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...

  7. javascript跟随滚动效果插件代码（javascript Follow Plugin）

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

  8. Javascript 广告浮动效果在浏览器中间N秒后移动到右下角

    Javascript 广告浮动效果在浏览器中间N秒后移动到右下角 闲着无聊做了一个,本人原创...就是这个页面的广告效果....怎么样???? 刚刚学习的javascript

  9. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

随机推荐

  1. 逐行返回http响应的内容

    前言 问题:1.什么是特殊字符? 2.为什么要处理特殊字符? 答:特殊字符指相对于传统或常用的符号外,使用频率较少字符且难以直接输入的符号,比如数学符号:单位符号:制表符等 有些符号在URL中是不能直 ...

  2. nyoj 37回文串

    述所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如"aba".当然,我们给你的问题不会再简单到判断一个字符串是不是回文字符串.现在要求你,给你一个字符串,可 ...

  3. Poj 2299 - Ultra-QuickSort 离散化,树状数组,逆序对

    Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 52306   Accepted: 19194 ...

  4. Linux I2C设备驱动编写（二）

    在(一)中简述了Linux I2C子系统的三个主要成员i2c_adapter.i2c_driver.i2c_client.三者的关系也在上一节进行了描述.应该已经算是对Linux I2C子系统有了初步 ...

  5. PHP两个字符串比较（人为出错），两字符串类型和数据表面相等，但strcmp()结果不为0

    PHP中,比较两个字符串是否相等用:strcmp(): PHP strcmp() 函数 PHP String 函数 定义和用法 strcmp() 函数比较两个字符串. 该函数返回: 0 - 如果两个字 ...

  6. zz android 系统 makefile文件（Android.mk）组织结构

    Android.mk脚本结构 下面是main.mk文件包含关系,本文档主要说明的就是这些文件里到底做了什么.(这个文件被根目录下的makefile文件包含) 一.     main.mk 1.检查版本 ...

  7. xls 和 xml 数据 排序 绑定 -原创

    xls 和 xml 排序 xml: <?xml version="1.0" encoding="UTF-8"?> <?xml-styleshe ...

  8. 4 weekend110的textinputformat对切片规划的源码分析 + 倒排索引的mr实现 + 多个job在同一个main方法中提交

    好的,现在,来weekend110的textinputformat对切片规划的源码分析, Inputformat默认是textinputformat,一通百通. 这就是今天,weekend110的te ...

  9. Java Apcahe的HTTPClient工具Http请求当请求超时重发

    java Apcahe的HTTPClient工具Http请求当请求超时时底层会默认进行重发,默认重发次数为3次,在某些情况下为了防止重复的请求,需要将自动重发覆盖. 设置HTTP参数,设置不进行自动重 ...

  10. Python 库大全

    作者:Lingfeng Ai链接:http://www.zhihu.com/question/24590883/answer/92420471来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...