最近在看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. FMDB 查询是否存在某个表，或某个数据

    //监测数据库中我要需要的表是否已经存在 NSString *existsSql = [NSString stringWithFormat:@"select count(name) as c ...

  2. js中焦点的含义是什么

    焦点即是光标   焦点是在页面上屏幕中闪动的的小竖线,鼠标点击可获得光标,Tab键可按照设置的Tabindex切换焦点

  3. bi api 软件

    https://www.interactivebrokers.com.hk/cn/index.php?f=5234&ns=T

  4. PHP 领域逻辑与数据库映射

    http://blog.csdn.net/hguisu/article/details/7569968

  5. 深入浅出 - Android系统移植与平台开发（一）

    深入浅出 - Android系统移植与平台开发(一) 分类: Android移植2012-09-05 14:16 16173人阅读 评论(12) 收藏 举报 androidgitgooglejdkub ...

  6. Hadoop MapReduce开发最佳实践（上篇）

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  8. Java Base64、AES、SHA1、MD5加密算法（转载）

    package com.example.decript; import java.io.UnsupportedEncodingException; import java.security.Inval ...

  9. Android L（5.0）源码之图形与图像处理之简单图片——Bitmap

    最近在研究android 5.0的gallery模块,学习了相关的知识点,准备写点博客总结一下,有时间了会补充完整

  10. TCP/IP 标志位 SYN ACK RST UTG PSH FIN

    三次握手:发送端发送一个SYN=1,ACK=0标志的数据包给接收端,请求进行连接,这是第一次握手:接收端收到请求并且允许连接的话,就会发送一个 SYN=1,ACK=1标志的数据包给发送端,告诉它,可以 ...