web前端之JavaScript DOM编程艺术之案例研究:图片库改进版

最新推荐文章于 2021-03-19 09:42:16 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2021-03-19 09:42:16 发布

阅读量558

点赞数 1

本文链接：https://blog.csdn.net/u014785563/article/details/53305039

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

JavaScript DOM编程艺术

10 篇文章 0 订阅

订阅专栏

web前端之JavaScript DOM编程艺术之案例研究:图片库改进版

window.οnlοad=prepareGallery;能进行相应的执行。但是如果有两个函数就不行了。
window.οnlοad=firstGallery;
window.οnlοad=secondGallery;
第二个会把第一个给替换了。

window.onload=function(){
    window.onload=firstGallery;
    window.onload=secondGallery;
}

这样就可以完美解决了。

第三种，使用弹性最佳的解决方案—-不管加载完毕时执行多少个函数，他都可以应付自如。这个函数的名字是addLoadEvent。下面就是addLoadEvent函数将要完成的操作：
把现有的window.onload事件处理函数的值存入变量oldonload。
如果在这个处理函数上还没有绑定任何函数，就像平时一样把新函数添加给他
如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾

function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload != 'function'){
        window.onload=func;
    }else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}

addLoadEvent(firstGallery);
addLoadEvent(secondGallery);

这样就可以加载进去了

三元操作符:
var text =whichpic.getAttribute(“title”) ? whichpic.getAttribute(“title”) : “”;
问号后面的是变量text两种可取值。如果getAttribute(“title”)的返回值不是null，text变量将被赋值第一个值；否则被赋值第二个值。
variable=condition ? if true : if false ;

键盘访问:

links[i].onclick=function(){
    return showPic(this) ? false :true;
}
links[i].onkeypress=function(){
    return showPic(this) ? false :true;
}

或:
links[i].onclick=function(){
    return showPic(this) ? false :true;
}
links[i].onkeypress=links[i].onclick;

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Images Gallery</title>
    <style type="text/css">
    body{
        font-family: "Helvetica","Arial",serif;
        color:#333;
        background: #ccc;
        margin: 1em 10px;
    }
    h1{
        color: #333;
        background: transparent;//背景透明
    }
    a{
        color: #c60;
        background: transparent;
        font-weight: bold;
        text-decoration: none;
    }
    ul{
        padding: 0;
    }
    li{
        float: left;
        padding: 1em;
        list-style: none;
    }
    #imagegally{
        list-style: none;
    }
    #imagegally li{
        display: inline;
    }
    #imagegally li a img{
        border: 0;
    }
    #placeholder{
        width: 900px;
        height: 500px;
    }
    img{
        display: block;
        clear: both;//清除浮动
    }
    </style>
    <script type="text/javascript">
    function addLoadEvent(func){
        var oldonload=window.onload;
        if(typeof window.onload != 'function'){
            window.onload=func;
        }else{
            window.onload=function(){
                oldonload();
                func();
            }
        }
    }

    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{
                text="";
            }

            var description=document.getElementById("description");
            if(description.firstChild.nodeType==3){
                description.firstChild.nodeValue=text;
            }

        }
        return true;


    }

    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);//是否返回一个false值以取消onclick时间的默认行为,其实应该由showPic函数决定.如果成功返回true,如果失败返回false
                return showPic(this) ? false :true;
            }
        }

    }

    addLoadEvent(prepareGallery);
    </script>
</head>
<body>
    <h1>Snapshots</h1>
    <ul id="imagegallery">
        <li>
            <a href="1.jpeg" title="1">
                <img src="1.jpeg" alt="1">
            </a>
        </li>
        <li>
            <a href="2.jpeg" title="2">
                <img src="2.jpeg" alt="2">
            </a>
        </li>
        <li>
            <a href="3.jpeg" title="3">
                <img src="3.jpeg" alt="3">
            </a>
        </li>
        <li>
            <a href="4.jpeg" title="4">
                <img src="4.jpeg" alt="4">
            </a>
        </li>


    </ul>
    <img id="placeholder" src="5.jpeg" alt="my images gallery">
    <p id="description">Choose an images.</p>
</body>
</html>