javascript图片库威力增强版
2015-09-27 23:49
555 查看
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="layout.css" media="screen"/>
</head>
<body onload="countBodyChildren()">
<h1>Snapshots</h1>
<ul>
<li><a href="Blue hills.jpg" onclick="showPic(this);return false;" title="the mountain of blue">山峦</a></li>
<li><a href="Sunset.jpg" onclick="showPic(this);return false;" title="red enjoy it">日出</a></li>
<li><a href="Water lilies.jpg" onclick="showPic(this);return false;" title="a summer flower">荷花</a></li>
<li><a href="Winter.jpg" onclick="showPic(this);return false;" title="a white world">雪林</a></li>
</ul>
<img id="placeholder" src="gallery.JPG" alt="my image gallery"/>
<p id="description">Choose an image</p>
<script type="text/javascript" src="showPic.js"></script>
</body>
</html>
showPic.js
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
}
layout.css
@charset "utf-8";
/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-family:"新宋体";
background-color:#ccc;
}
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;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="layout.css" media="screen"/>
</head>
<body onload="countBodyChildren()">
<h1>Snapshots</h1>
<ul>
<li><a href="Blue hills.jpg" onclick="showPic(this);return false;" title="the mountain of blue">山峦</a></li>
<li><a href="Sunset.jpg" onclick="showPic(this);return false;" title="red enjoy it">日出</a></li>
<li><a href="Water lilies.jpg" onclick="showPic(this);return false;" title="a summer flower">荷花</a></li>
<li><a href="Winter.jpg" onclick="showPic(this);return false;" title="a white world">雪林</a></li>
</ul>
<img id="placeholder" src="gallery.JPG" alt="my image gallery"/>
<p id="description">Choose an image</p>
<script type="text/javascript" src="showPic.js"></script>
</body>
</html>
showPic.js
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
}
layout.css
@charset "utf-8";
/* CSS Document */
body{
font-family:Arial, Helvetica, sans-serif;
color:#333;
font-family:"新宋体";
background-color:#ccc;
}
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;
}
相关文章推荐
- JavaScript闭包原理
- javascript中的浮点数和四舍五入误差
- html/Javascript播放WAV音频文件的方法
- [Javascript] An Introduction to JSPM (JavaScript Package Manager)
- 序列化各个类型成JSON XML实例
- jsp页面引入(引入其他jsp页面)三种方式
- js-图片自动播放
- js-图片的放大和缩小
- js 变量作用域
- jsonp的工作原理
- jsop
- json
- JS 验证表单文本域输入空格问题
- [LeetCode][JavaScript]Pascal's Triangle II
- [LeetCode][JavaScript]Pascal's Triangle
- JavaScript -- BATweb笔试面试
- 20150927js学习回顾
- JavaScript高级程序设计之面向对象的程序设计之继承之原型链 第6.3.1讲笔记
- JSP的基础语法
- 深入javascript-继承机制