Alter the structure of web pages with JavaScript
function insertAfter( newElement, targetElement ) {
var parent = targetElement.parentNode ;
if( parent.lastChild == targetElement ) {
parent.appendChild( newElement );
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="styles/layout.css" media="screen">
</head>
<body> <h1>Snapshiots</h1>
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="data:images/thumbnail_fireworks.jpg" alt="Fireworks">
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffe">
<img src="data:images/thumbnail_coffee.jpg" alt="Coffee">
</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">
<img src="data:images/thumbnail_rose.jpg" alt="Rose">
</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">
<img src="data:images/thumbnail_bigben.jpg" alt="Big Ben">
</a>
</li>
</ul> <script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>
/*** showPic.js ***/
/**
* Created by Administrator on 9/9/2015.
*/ /*
you can use this function to count how many children nodes the body element contains
*/
function countBodyChildren() {
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.nodeType);
alert( body_element.childNodes.length );
} function addLoadEvent(func) {
var oldonload = window.onload;
if( typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
} function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
} function preparePlaceholder() {
if( !document.createElement )return false;
if( !document.createTextNode ) return false;
if( !document.getElementById ) return false;
if( !document.getElementById("imagegallery")) return false; var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "images/placeholder.gif");
placeholder.setAttribute("alt", "my image gallery");
var description = document.createElement("p");
description.setAttribute("id", "description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext); var gallery = document.getElementById("imagegallery");
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
} function prepareGallery() {
if( !document.getElementsByTagName ) return false;
if( !document.getElementById ) return false;
if( !document.getElementById("imagegallery") ) return false; var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i=0; i<links.length; i++) {
links[i].onclick = function() {
return showPic(this) ? false : true;
}
}
} function showPic(whicPic) {
if( !document.getElementsByTagName ) return false;
if( !document.getElementById("placeholder") ) return false; var source = whicPic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source); if(document.getElementById("description")) {
var text = whicPic.getAttribute("title") ? whicPic.getAttribute("title") : 3;
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
return true;
} addLoadEvent( preparePlaceholder );
addLoadEvent( prepareGallery );
/*** layout.css ***/
body{
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
/*background-color: #777;*/
}
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;
}
Alter the structure of web pages with JavaScript的更多相关文章
- Displaying Data in a Chart with ASP.NET Web Pages (Razor)
This article explains how to use a chart to display data in an ASP.NET Web Pages (Razor) website by ...
- 15款加速 Web 开发的 JavaScript 框架
JavaScript 可以通过多种方式来创建交互式的网站和 Web 应用程序.利用 JavaScript,可以让你移动 HTML 元素,创建各种各样的自定义动画,给你的访问者更好的终端用户体验. 对于 ...
- Web Pages razor 学习
1. Web Pages razor Web Pages 是三种 ASP.NET 编程模型中的一种,用于创建 ASP.NET 网站和 web 应用程序. 其他两种编程模型是 Web Forms 和 M ...
- ASP.NET Web Pages：简介
ylbtech-.Net-ASP.NET Web Pages:简介 ASP.NET 是一个使用 HTML.CSS.JavaScript 和服务器脚本创建网页和网站的开发框架. ASP.NET 支持三种 ...
- Transferring Data Between ASP.NET Web Pages
14 July 2012 20:24 http://www.mikesdotnetting.com/article/192/transferring-data-between-asp-net-web- ...
- Web Pages
什么是Web Pages 1.WebPages是三种创建ASP.NET网站或Web应用程序模式中的一种 2.而其两种编程模式是MVC(Model-View-Controller,模型-视图-控制器)和 ...
- Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites
Customizing Site-Wide Behavior for ASP.NET Web Pages (Razor) Sites By Tom FitzMacken|February 17, 20 ...
- ASP.NET Web Pages (Razor) FAQ
ASP.NET Web Pages (Razor) FAQ By Tom FitzMacken|February 7, 2014 Print This article lists some fre ...
- 转：Generating PDFs from Web Pages on the Fly with jsPDF
The Portable Document Format has been one the major innovations in the fields of desktop publishing ...
随机推荐
- Java —异常
异常简介 有异于常态,和正常情况不一样,有错误出现,阻止当前方法或作用域,称为异常. Java中的异常类都继承Throwable类,它有两个子类:Error和Exception.Error很少接触,主 ...
- MSSQL复制分发对异构数据库之间大容量数据分发造成异常
由于历史遗留的问题,现有的架构中存在采用MSSQL的复制分发功能,从Oracle发布数据到MSSQL. 关于这项发布的实现原理,官方表述如下: Oracle 事务发布是通过使用 SQL Server ...
- Excel操作之VLOOKUP函数
1.作用 VLOOKUP函数是Excel中的一个纵向查找函数,它与LOOKUP函数和HLOOKUP函数属于一类函数,在工作中都有广泛应用,例如可以用来核对数据,多个表格之间快速导入数据等函数功能.功能 ...
- OpenGL学习 Our First OpenGL Program
This shows you how to create the main window with the book’s application framework and how to render ...
- LA 3902 网络
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...
- 2017.10.6 Java命名规范及使用情况
Package 的命名 Package 的名字应该都是由一个小写单词组成. Class 的命名 Class 的名字必须由大写字母开头而其他字母都小写的单词组成 Class 变量的命名 变量的名字必须用 ...
- CUDA memory
原文链接 CUDA存储器类型: 每个线程拥有自己的register and loacal memory; 每个线程块拥有一块shared memory; 所有线程都可以访问global memory; ...
- 配置伪静态（URL重写）
本篇借鉴了很多文章,这里做个记录. 有时我们的导航栏出现xx.aspx?id=x&name=xx 等等这样,会显得不好看,我们可以利用伪静态来美化我们的导航栏,伪静态的形式可以自己定义,本质还 ...
- java基础语法：非法修饰符组合 abstract
abstract 与 final :abstract 是需要被继承以实现的,final却说你不能被修改,逻辑错误 abstract 与 private:同样的abstract 需要被子类实现,但pr ...
- 使用session处理用户搜索后数据的上一页和下一页跳转
搜索语句界面: /*单一检索:此处为一个下拉列表的检索*/ if(isset($_POST['submit']) && $_POST['submit'] == '点击搜索') { if ...