JavaScript学习笔记之图片库案例分析

 更新时间:2019年01月08日 11:33:28   作者:致Great   我要评论

这篇文章主要介绍了JavaScript学习笔记之图片库案例,结合具体实例形式分析了javascript图片库相关的页面元素动态操作实现技巧,需要的朋友可以参考下

本文实例讲述了JavaScript图片库。分享给大家供大家参考,具体如下:

一、一个javascript 图片库实例,下面是效果图

点击顶部导航,会在本页面进行刷新图片,然后,在底部会显示文本的变化

二、下面是代码

1、gallery.html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/showPic.js"></script>
    <link rel="stylesheet" type="text/css" href="css/layout.css" rel="external nofollow" />
  </head>
  <body>
    <h1>Snapshots</h1>
    <ul>
      <li>
        <a href="img/a.jpg" rel="external nofollow" title="Hongse Fengye" onclick="showPic(this);return false;">红色枫叶</a>
      </li>
      <li>
        <a href="img/b.jpg" rel="external nofollow" title="Huangse Fengye" onclick="showPic(this); return false;">黄色枫叶</a>
      </li>
      <li>
        <a href="img/c.jpg" rel="external nofollow" title="Hongse Shu" onclick="showPic(this); return false;">红色树</a>
      </li>
      <li>
        <a href="img/d.jpg" rel="external nofollow" title="Lanse Fengye" onclick="showPic(this);return false;">蓝色枫叶</a>
      </li>
    </ul>
    <img src="img/3302-106.jpg" id="placeholder" alt="My Gallery"/>
    <p id="description">Choose an image</p>
  </body>
</html>

2、showPics.js代码

function showPic(whichpic){
  var sorce=whichpic.getAttribute("href");
  var placeholder=document.getElementById("placeholder");
  placeholder.setAttribute("src",sorce);
  var text=whichpic.getAttribute("title");
  var description=document.getElementById("description");
  description.firstChild.nodeValue=text;
}

3、layout.css代码

img{
  width: 600px;
}
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;
}
img{
  display: block;
  clear: both;
}

三、几个新的DOM属性

1、childNodes

获得 body 元素的子节点集合:

document.body.childNodes;

2、nodeType

获得 body 元素的节点类型:

document.body.nodeType;

3、nodeValue

nodeValue 属性设置或返回指定节点的节点值。

4、firstChild、lastChild

firstChild 属性返回指定节点的首个子节点,以 Node 对象。

lastChild 属性返回指定节点的最后一个子节点,以 Node 对象。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • javascript实现tabs选项卡切换效果(扩展版)

    javascript实现tabs选项卡切换效果(扩展版)

    常用的页面效果有弹出层效果,无缝滚动效果,选项卡切换效果,接下来与大家分享一款自己用原生javascript写的选项卡切换效果在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果
    2013-03-03
  • 原生js实现键盘控制div移动且解决停顿问题

    原生js实现键盘控制div移动且解决停顿问题

    这篇文章主要给大家介绍了如何利用原生js实现键盘控制div移动,并且解决在移动过程中的停顿问题,文中给出了详细的示例代码,相信对大家的理解和学习很有帮助,下面跟着小编一起来看看吧。
    2016-12-12
  • JS实现类似百叶窗下拉菜单效果

    JS实现类似百叶窗下拉菜单效果

    百叶窗下拉菜单效果非常棒,今天小编给大家分享一段js代码实现类似百叶窗下拉菜单效果,需要的朋友参考下
    2016-12-12
  • JS中的异常处理方法分享

    JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法
    2013-12-12
  • 简单谈谈gulp-changed插件

    简单谈谈gulp-changed插件

    这篇文章主要介绍了关于gulp-changed插件的相关资料,文中介绍的还是相对详细的,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • iscroll.js的上拉下拉刷新时无法回弹的解决方法

    iscroll.js的上拉下拉刷新时无法回弹的解决方法

    本文给大家分享的是在IOS浏览器中使用iscroll.js的上拉下拉刷新时当手指划出屏幕后无法回弹的解决方法,希望对大家能够有所帮助。
    2016-02-02
  • js实时获取并显示当前时间的方法

    js实时获取并显示当前时间的方法

    这篇文章主要介绍了js实时获取并显示当前时间的方法,涉及javascript针对时间及页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript 继承详解(五)

    JavaScript 继承详解(五)

    在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance,需要的朋友可以参考下
    2016-10-10
  • Bootstrap基本布局实现方法详解

    Bootstrap基本布局实现方法详解

    这篇文章主要为大家详细介绍了Bootstrap基本布局实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 微信小程序之圆形进度条实现思路

    微信小程序之圆形进度条实现思路

    这篇文章主要介绍了微信小程序之圆形进度条实现思路,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02

最新评论