js图片库

一、

<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"  />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
 <li>
  <a href="images/fireworks.jpg" title="A fireworks display">Firework</a>
 </li>
 <li>
  <a href="images/coffee.jpg" title="A cup of black of coffee">Coffee</a>
 </li>
 <li>
  <a herf="images/rose.jpg" title="A red,red rose">Rose</a>
 </li>
</ul>
  <img id="placeholder" src="images/placeholder.gift" alt="my image gallery" />
</body>
</html>

通过改变站位符src属性的值来调用图片。
例：
站位符<img id="placeholder" src="images/placeholder.gift" alt="my image gallery" />
假设whichpic为一个指向某个图片的<a>元素
var source=whichpic.getAttribut("herf")得到图片存储的相对路径。
var placeholder=document.getElementById("placeholder") 定义获得站位占位符的元素节点。
placeholder.setAttribute("src","source")将站位符中的图片换为source指向的图片。

二、事件处理：
    1、onmouseover 当鼠标悬停时触发一个动作
    2、onmouseout 当鼠标离开时触发一个动作
    3、onclick     当鼠标点击时触发一个动作
    当点击事件后"return false;"默认为没有点击。
三、

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charest="utf-8">
    <tittle>Shopping</tittle>
      <style>
        selector{property:value;}
        p{color:yellow;font-family:"arial",sans-serif;
          font-size: 1.2em}
        .special{font-style:italic;}
        h2.special{font-transform:uppercase;}
         body{color:white;background:black;}
         #purchases{border:1px solid white;background-color:#333;
         color:#ccc;padding:1em;}
         #purchases li{font-wight:bold;}
      </style>
 </head>
 <body>
    
  <h1>What to buy</h1>
     <p tittle="a gentle reminder">Don't forget to buy thiss tuff.</p>
      <ul id="purchases">
         <li>A tin of beans</li>
         <li class="sale">Chinese</li>
         <li class="sale important">Milk</li>
      </ul>
 </body>
</html>

    1、childNodes   获取一个元素的所有子元素，以数组的形式表现。
    例子：
    var body_element=ducomemnt.getElementByTagName("body")[0]
    body_element.childNodes
    获取body 中所有的子元素
    window.onload =sth
    当页面加载完成时执行 sth 函数。
    2、nodetype
    元素节点的nodetype值为1.
    属性节点的nodetype值为2.
    文本节点的nodetype值为3.

function showpic(whichpic){
  var source=whichpic.getAttribute("herf")  //获取whichpic的herf定义为source
  var placeholder=docunent.getElementById("placedholder") //获取占位符定义为placedholder
  placeholder.setAttribute("src",source);  //将用herf取代占位符的src
  var text =whichpic.getAttribute("title");  //获取whichpic 的title属性
  var description=document.getElementById("description") //获取图片下的文本
  description.firstChild.nodeValue=text; //将图片下的文本的内容改为whichpic的title中的内容
}

猜你喜欢