最近在看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. Vim 命令 （转）

    上图引用自何处忘记了,不好意思. 基础快捷键 normal模式下 快速查找 fa → 到下一个为a的字符处,你也可以fs到下一个为s的字符.     t, → 到逗号前的第一个字符.逗号可以变成其它字 ...

  2. w3c学习总结1

    1.根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项.HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使 ...

  3. 转 java.lang.ClassNotFoundException: org.apache.commons.lang.exception.NestableRuntimeException

    转自:http://blog.csdn.net/zb0567/article/details/7893063 java.lang.ClassNotFoundException: org.apache. ...

  4. CodeForces 660A Co-prime Array

    水题.放个1就可以了.暴力的找数字也是很快的. #include<cstdio> #include<cstring> #include<cmath> #includ ...

  5. Laravel Cache 使用

    在项目中使用 laravel 的 cache 时,使用下面形式方法: $value = Cache::remember('users', $minutes, function() { return D ...

  6. Appium的安装和使用

    <!DOCTYPE html><html><head><title>Appium的安装和使用</title><meta http-eq ...

  7. Linux 分区的概念

    事实上无论是linux 还是 window 都必须遵循以下分区的规则 分区类型 1.主分区:最多只能四个. 2.扩展分区: - 最多只能一个 - 主分区加扩展分区最多只能有四个 - 不能写入数据,它存 ...

  8. NPOI使用Datatable导出到Excel

    首先要引用dll 下载地址:http://pan.baidu.com/s/1dFr2m 引入命名空间: using NPOI.HSSF.UserModel;using NPOI.SS.UserMode ...

  9. Delphi中使用Dos窗口输出调试信息

    在项目文件 *.DPR (Project->View Source)  里加上{$APPTYPE   CONSOLE} 然后,在需要输出处加上 Writeln(‘your debug messa ...

  10. vuejs 父组件向子组件传递($broadcast()的用法)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...