最近在看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. (中等) CF 311B Cats Transport，斜率优化DP。

    Zxr960115 is owner of a large farm. He feeds m cute cats and employs p feeders. There's a straight r ...

  2. (简单) POJ 3254 Corn Fields，状压DP。

    Description Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; ...

  3. (简单) POJ 3279 Fliptile，集合枚举。

    Description Farmer John knows that an intellectually satisfied cow is a happy cow who will give more ...

  4. [iOS Animation]-CALayer 变换

    变换 很不幸,没人能告诉你母体是什么,你只能自己体会 -- 骇客帝国 在第四章“可视效果”中,我们研究了一些增强图层和它的内容显示效果的一些技术,在这一章中,我们将要研究可以用来对图层旋转,摆放或者扭 ...

  5. ios开发获取SIM卡信息

    .加入一个Framework(CoreTelephony.framework). .引入头文件 #import<CoreTelephony/CoreTelephonyDefines.h> ...

  6. Android源码编译jar包BUILD_JAVA_LIBRARY 与BUILD_STATIC_JAVA_LIBRARY的区别（三）

    继续, 上文提到的是用BUILD_STATIC_JAVA_LIBRARY在Android4.2源码下编译出来的jar包可以在Eclipse(SDK版本4.1)上使用, 找来Android6.0的源码, ...

  7. 【HNOI2013】题解 bzoj3139~bzoj3144

    比赛 题目:  http://www.lydsy.com/JudgeOnline/problem.php?id=3139 题解: 3$\le$N$\le$10,比较明显是一个搜索题,一开始我是直接搜了 ...

  8. leetcode--011 copy list with random pointer

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3UAAABjCAIAAACzC75sAAAMTElEQVR4nO3cyYHivBYG0D8n0nIojo ...

  9. Oracle安装卸载

    http://study.163.com/course/courseLearn.htm?courseId=932016#/learn/video?lessonId=1115367&course ...

  10. 负载均衡探测器lbd

    负载均衡探测器lbd   大型网站为了解决海量访问问题,往往采用负载均衡技术,将用户的访问分配到不同的服务器上.网站的负载均衡可以从DNS和HTTP两个环节进行实施.在进行Web渗透测试的时候,需要先 ...