【js 编程艺术】小制作一

最近在看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="images/thumbnail_baiyang.jpg">
            </a>
        </li>
        <li>
            <a href="images/jinniu.jpg" title="jinniu">jinniu<img src="images/thumbnail_jinniu.jpg">
            </a>
        </li>
        <li>
            <a href="images/shuangyu.jpg" title="shuangyu">shuangyu<img src="images/thumbnail_shuangyu.jpg">
            </a>
        </li>
        <li>
            <a href="images/shuiping.jpg" title="shuiping">shuipinh<img src="images/thumbnail_shuiping.jpg">
            </a>
        </li>
    </ul>
    <!-- <img id="placeholder" src="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: 0;
}
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: 0;
}

 

最后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代码所在文件夹！！！

最后的效果图：

 

posted @ 2017-01-17 14:00  天秤libra  阅读(194)  评论(0)  编辑  收藏  举报