最近在看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. Tinyproxy

    Tinyproxy Tinyproxy is a light-weight HTTP/HTTPS proxy daemon for POSIX operating systems. Designed ...

  2. 解决airserver在Windows下安装失败的问题

    airserver 可以将iphone 实时投影到mac 和 pc.在mac上安装非常简单.但是在Windows上安装时会有很多问题.之前我电脑安装很快就完成了(因为我之前已经在不知情的前提先事先装过 ...

  3. javascript open window

    参数 | 取值范围 | 说明alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended ...

  4. echarts 系列一

    由于近期项目需要做地图方便的可视化图标,经过比较最终选定echarts. echarts在可视化视图方面非常强大,可以满足大多数开发需求. 采用标签式引入js文件,引用的js 文件位置 echarts ...

  5. LPC1768的SPI通讯

    SPI是一种全双工串行接口,可处理多个连接到指定总线上的主机和从机.在数据传输过程中总线上只能有一个主机和一个从机通信.在数据传输中,主机总是会向从机发送一帧8到16个位的数据,而从机也总会向主机发送 ...

  6. iOS开发——判断是否第一次启动

    在我们做项目的时候,判断是否是第一次启动,还是比较常用的,比如,欢迎界面,只是第一次启动需要的调查问卷等等,目的明确,方法很多,这里介绍一种简单的. 在你需要只有第一次启动才跳转的地方写上 if(![ ...

  7. iOS获取设备唯一标识的各种方法？IDFA、IDFV、UDID分别是什么含义？

    一.UDID (Unique Device Identifier) UDID的全称是Unique Device Identifier,顾名思义,它就是苹果IOS设备的唯一识别码,它由40个字符的字母和 ...

  8. UILabel常用属性小结

    标签常用的属性: (1)frame属性:设置标签的位置与大小. frame = CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat heig ...

  9. Dom编程（二）

    document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document  document的方法: (1)write:向文档中写入内容. ...

  10. 获取url参数和时间格式化

    1. 获取url参数: var url = request("url"); //获取url参数 function request(paras) { //decodeURI() 函数 ...