网站建设资讯

NEWS

网站建设资讯

JavaScript中图片库的示例分析-创新互联

这篇文章将为大家详细讲解有关JavaScript中图片库的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联,专注为中小企业提供官网建设、营销型网站制作、成都响应式网站建设、展示型成都网站设计、成都网站制作等服务,帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

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

JavaScript中图片库的示例分析

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

二、下面是代码

1、gallery.html代码



  
    
    
    
    
  
  
    

Snapshots

    
          
  •         红色枫叶       
  •       
  •         黄色枫叶       
  •       
  •         红色树       
  •       
  •         蓝色枫叶       
  •     
         Choose an image

  

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%;
}
h2{
  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中图片库的示例分析-创新互联
标题URL:http://njwzjz.com/article/ehphd.html