最近在看js编程艺术，照葫芦画瓢，做了一个小网页。作为一枚前端渣渣，遇到了好多坑，在这里就不提了。

首先是html代码

/*gallery.html*/
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>image gallery</title>

    <link rel="stylesheet" type="text/css" href="styles/layout.css" media="screen">

</head>

<body>

    <h1>Snapshots</h1>

    <ul id="imagegallery">

        <li>

            <a href="images/baiyang.jpg" title="baiyang">baiyang<img src="data:images/thumbnail_baiyang.jpg">

            </a>

        </li>

        <li>

            <a href="images/jinniu.jpg" title="jinniu">jinniu<img src="data:images/thumbnail_jinniu.jpg">

            </a>

        </li>

        <li>

            <a href="images/shuangyu.jpg" title="shuangyu">shuangyu<img src="data:images/thumbnail_shuangyu.jpg">

            </a>

        </li>

        <li>

            <a href="images/shuiping.jpg" title="shuiping">shuipinh<img src="data:images/thumbnail_shuiping.jpg">

            </a>

        </li>

    </ul>

    <!-- <img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery">

    <p id="description">Choose an image</p> -->

    <script type="text/javascript" src="scripts/showPic.js"></script>

</body>

</html>

然后css代码

/* layout.css*/
body{

    font-family: "Helbetica", "Arial", serif;

    color: #333;

    background-color: #ccc;

    margin: 1em 10%;

}

h1{

    color: #333;

    background-color: transparent;

    font-weight: bold;

    text-decoration: none;

}

ul{

    padding:;

}

li{

    float: left;

    padding: 1em;

    list-style: none;

}

img{

    display: block;

    clear: both;

    background-color: #fff;

}

#imagegallery{

    list-style: none;

}

#imagegallery li{

    display: inline;

}

#imagegallery li a img{

    border:;

}

最后js代码

/*showPic.js*/
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);

        }

        links[i].onkeypress = links[i].onclick;

    }

}

function showPic(whichpic){

    if(!document.getElementById("placeholder"))    return true;

    var source = whichpic.getAttribute("href");

    var placeholder = document.getElementById("placeholder");

    placeholder.setAttribute("src", source);

    if(!document.getElementById("description"))    return false;

    if(whichpic.getAttribute("title")) {

        var text = whichpic.getAttribute("title");

    }else{

        var text = "";

    }

    var description = document.getElementById("description");

    if(description.firstChild.nodeType == 3){

        description.firstChild.nodeValue = text;

    }

    return false;

}

addLoadEvent(preparePlaceholder);

addLoadEvent(prepareGallery);

注意css，js代码所在文件夹！！！

最后的效果图：

【js 编程艺术】小制作一的更多相关文章

  1. 【js编程艺术】小制作六

    1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  2. 【js编程艺术】小制作五

    1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  3. 【js 编程艺术】小制作四

    1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  4. 【js 编程艺术】小制作三

    1.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. 【js 编程艺术】小制作二

    首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...

  6. 【js编程艺术】 之有用的函数

    学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof wi ...

  7. JS 编程艺术

    JS艺术片段剪贴 getFullDate: function (date) { //返回 YYYY年MM月DD日 var year = month = day = ' '; if (isNaN(dat ...

  8. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  9. 转《UNIX编程艺术》读书心得

    花了一段时间看完了<UNIX编程艺术>,但不是看得特别仔细,尤其是后面作者通过对工具的讲解来阐述其设计思想,因为很多工具能未曾接触过,难免就会产生一些乏味的感觉.其实就像译者姜宏在译序里说 ...

随机推荐

  1. UITableView表格操作

    UITableView[表格视图] UITableView是表格视图,是UIScrollView的子类,非常重要. 一.表格视图常用属性 1.基本属性方法 创建一个tableView //    UI ...

  2. 关联规则算法---Eclat算法

    Eclat算法 与fp-growth 和apriori算法不同,Eclat算法加入了倒排的思想,具体就是将事务数据中的项作为key,每个项对应的事务ID作为value. 原输入数据为 tid item ...

  3. VS2010与SVN

    http://blog.sina.com.cn/s/blog_4fe44775010182yl.html 在VS2010中使用SVN,必须先安装SVN的客户端,再安装VisualSVN(SVN的插件) ...

  4. IO之同步、异步、阻塞、非阻塞 （2）

    [原创链接: http://www.smithfox.com/?e=191, 转载请保留此声明, 谢谢! ] I/O Model 是一个很大的话题, 也是一个实践性很强的事情, 网上有各种说法和资料, ...

  5. 【bzoj1552】[Cerc2007]robotic sort

    题目描述 输入 输入共两行,第一行为一个整数N,N表示物品的个数,1<=N<=100000.第二行为N个用空格隔开的正整数,表示N个物品最初排列的编号. 输出 输出共一行,N个用空格隔开的 ...

  6. 【转】国外程序员收集整理的PHP资源大全

    ziadoz在 Github发起维护的一个PHP资源列表,内容包括:库.框架.模板.安全.代码分析.日志.第三方库.配置工具.Web 工具.书籍.电子书.经典博文等等.伯乐在线对该资源列表进行了翻译, ...

  7. Android之Margin和Padding属性及支持的长度单位

    做了个小软件后,终于把Margin和Padding弄清楚了,现总结如下: Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin ...

  8. PHP实反向代理-收藏

    需求 现在有些后辍的域名不支持备案,这个时候需要用免备案主机或空间做个反向代理,这样可实现内容存放在国内主机统一管理 实现 用 php-dynamic-mirror 可实现,并在头部进行域名转换,可实 ...

  9. iOS UICollectionView 长按移动cell

    ref:http://www.jianshu.com/p/31d07bf32d62 iOS 9之后: 示例如下 效果 前言: 看完你可以学到哪些呢? 就是文章标题那么多, 只有那么多. . 手残效果图 ...

  10. 全方位分析Objcetive-C Runtime 分类： ios技术 2015-03-11 22:29 77人阅读 评论(0) 收藏

    本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言 简介 与Runtime交互 ...