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 ...
随机推荐
- window系统安装jdk，jre
java开发少不了安装jdk.当然如果只是想运行其他人的java项目,只需要安装jre就行了,不需要安装jdk,jdk是编译用的.jdk可以同时安装多个 版本,只需要在项目部署时注意切换版本选择.在这 ...
- HTML：::before和::after伪元素的用法
随笔 - 366 文章 - 0 评论 - 392 ::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:li ...
- Office加载项对Excel进行读写操作
转载自我的个人主页 前言 在开发ExcelWeb插件的时候,一大亮点就是可以在web项目中操作Excel,读取Excel的内容,也可以将服务端的数据写入的 Excel中,大大方便的用户使用Excel, ...
- 笨办法学Python（三十一）
习题 31: 作出决定 这本书的上半部分你打印了一些东西,而且调用了函数,不过一切都是直线式进行的.你的脚本从最上面一行开始,一路运行到结束,但其中并没有决定程序流向的分支点.现在你已经学了 if, ...
- 257. Binary Tree Paths (dfs recurive & stack)
Given a binary tree, return all root-to-leaf paths. Note: A leaf is a node with no children. Example ...
- 关于Ubuntu下安装Win8和Win8下安装Ubuntu的注意事项
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/svitter/article/details/32932387 本文出自:http://blog.c ...
- LA 3938 动态最大连续和
题目链接:https://vjudge.net/contest/146667#problem/C 题意:动态的求一个区间的最大连续和. 分析: 看上去可以RMQ去做,但是,当分成两个部分,原来的部分的 ...
- 轻量级HTTP服务器Nginx(常用配置实例)
轻量级HTTP服务器Nginx(常用配置实例) 文章来源于南非蚂蚁 Nginx作为一个HTTP服务器,在功能实现方面和性能方面都表现得非常卓越,完全可以与Apache相媲美,几乎可以实现Apa ...
- Spring是如何管理Bean
容器是什么?spring中是如何体现的?一直有疑惑,这两天看了一下Spring管理bean的Demo,对于Spring中的容器有了简单的认识. 我们知道,容器是一个空间的概念,一般理解为可盛放物体的地 ...
- jenkin+centos 7 环境搭建
1.安装jenkins 首先安装好虚拟机和centos7操作系统 2.安装jdk 利用yum源来安装jdk(此方法不需要配置环境变量) 查看yum库中的java安装包 :yum -y list ja ...