js图片库
程序员文章站
2022-07-11 10:55:23
...
一、
通过改变站位符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;"默认为没有点击。
三、
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.
<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中的内容
}