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 ...
随机推荐
- 【小结】IIS7下的Http Native Module开发
今天接到Product Manager的通知,Exchange 2007环境下的Native Module不再需要开发(详情可见上篇),但最近几天一直在做Prototype,那就做一下小结吧,总结一下 ...
- UIWindow及程序启动的过程
1. UIWindow才有自发显示的功能, 一个程序之所以能显示东西,是因为有window !// [self.window makeKeyAndVisible]; 2. 任何view的显示 ...
- 进一步了解this和super
知乎上看到一问题很好,拿了与大家分享,原地址:https://www.zhihu.com/question/31548104. 问: JAVA 中this 和super与覆写冲突的问题? 实例一: 输 ...
- 01、Spark安装与配置
01.Spark安装与配置 1.hadoop回顾 Hadoop是分布式计算引擎,含有四大模块,common.hdfs.mapreduce和yarn. 2.并发和并行 并发通常指针对单个节点的应对多个请 ...
- MyEclipse 相关配置操作、问题处理及快捷键说明
MyEclipse傻瓜式安装不做介绍,试用期结束后破解操作见博客:MyEclipse 2014 破解补丁及激活步骤 以下为安装完MyEclipse后一般需要进行的一些配置,写来自己参考用.比较简陋,望 ...
- Wampserver由橙变绿的解决过程
因为C盘的内存问题,就重装了win7系统,那么就面临着很对软件要重新进行安装,安装wampserver时,再次遇到了服务器的图标一直是橙色的而不变绿色,安装包地址: http://download.c ...
- STM32开发-MDK新建工程及配置
本人也是接触stm32没多久,之前用的MDK是5.1,现在用的是5.13,MDK5.0之前的版本(本人简称旧版)和之后的版本(本人简称新版)新建工程有很大区别.对于刚开始用学stm32的新手来说,基本 ...
- G711格式语音采集/编码/转码/解码/播放
2019-05-01 语音g711格式和AMR格式类似,应用很简单,很多人已经整理过了,收录于此,以备不时之需,用别人现成的足矣,我们的时间应该用来干更有意义的事. 1.PCM to G711 Fas ...
- mysql常用命令添加外键主键约束存储过程索引
数据库连接 mysql -u root -p123456 查看表 show databases 创建数据库设置编码 create table books character set utf8; 创建用 ...
- SpringBoot学习11:springboot异常处理方式1(自定义异常页面)
SpringBoot 默认的处理异常的机制:SpringBoot 默认的已经提供了一套处理异常的机制.一旦程序中出现了异常 SpringBoot 会向/error 的 url 发送请求.在 sprin ...