图片库-V2

图片库-V2_第1张图片

图片库进行了进一步改进

js代码与html进行了分离,进行多项检测(检测要依据实际情况看是否必要),检测的目的是使js尽量少的依赖html内容,从而使js当html内容变化时不会因此而运行出错。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
</head>
<body>
    <h1>Snapshots</h1>
    <ul id="imagegallery">
        <li><a href="images/1.jpg" title="A flag display"><img src="images/1-2.jpg"></a></li>
        <li><a href="images/2.jpg" title="A ocean display"><img src="images/2-2.jpg"></a></li>
        <li><a href="images/3.jpg" title="A butterfly display"><img src="images/3-2.jpg"></a></li>
        <li><a href="images/4.jpg" title="A diamond display"><img src="images/4-2.jpg"></a></li>
    </ul>
    <img id="placeholder" src="images/blank.jpg" alt="my image gallery" />
    <p id="description">Choose an image</p>
    <script type="text/javascript" src="js/showPic.js"></script>
</body>
</html>
body {
    font-family: Helvetica,Arial,serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}
a {
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
#imagegallery{
    list-style: none;
    padding: 0;
}
#imagegallery li{
    display: inline; 
    padding-right: 5px; 
}
body>img {
    display: block;
    clear: both;
}
p {
    font-weight: bold;
    color: #333;
}
addLoadEvent(prepareGallery);
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);
            return showPic(this)?false:true;
        }
        // links[i].onkeypress=function(){
        //     return showPic(this)?false:true;
        // }
        //links[i].onkeypress=links[i].onclick;
        //不需要处理onkeypress事件,onclick事件已能满足需求
    }
}
function showPic(whichpic){
        if (!document.getElementById("placeholder"))return false;
        var source=whichpic.getAttribute("href");
        var placeholder=document.getElementById("placeholder");
        if (placeholder.nodeName!="IMG")return false;
        placeholder.setAttribute("src",source);
        if (document.getElementById("description")) {
            // if(whichpic.getAttribute("title")){
            //     var text=whichpic.getAttribute("title");
            // }else{
            //     var text="";
            // }
            var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
            var description=document.getElementById("description");
            if (description.firstChild.nodeType==3) {
                description.firstChild.nodeValue=text;
            }
        }
        return true;
    }
function addLoadEvent (func) {
    var oldload=window.onload;
    if (typeof window.onload !="function") {
        window.onload=func;
    }else{
        window.onload=function(){
            oldload();
            func();
        }
    }
}


你可能感兴趣的:(图片库-V2)