JavaScript連載33-點擊查看大圖效果以及閉包初步

時間 2020-09-20

標籤 javascript 連載點擊查看效果以及閉包初步欄目 JavaScript 简体版

原文原文鏈接

1、點擊圖片顯示大圖代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D33_1_SwitchIcon</title>
    <style>
        #box{
            border:1px solid #cccccc;
            width:360px;
            height:70px;
            padding-top:360px;
            margin:100px auto;
            background:url("img/img_05.png") no-repeat;
        }
        ul{
            display:flex;
            justify-content:center;
            align-items: center;
            cursor:pointer;
            list-style: none;
        }
        img{
            width: 250px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="li01"><img src="img/img_01.png" alt=""></li>
            <li id="li02"><img src="img/img_02.png" alt=""></li>
            <li id="li03"><img src="img/img_03.png" alt=""></li>
            <li id="li04"><img src="img/img_04.png" alt=""></li>
            <li id="li05"><img src="img/img_05.png" alt=""></li>
        </ul>
    </div>
    <script>
        window.onload=function (ev) {
            //1.獲取標籤
            // var li01 = document.getElementById("li01");
            // var li02 = document.getElementById("li02");
            // var li03 = document.getElementById("li03");
            // var li04 = document.getElementById("li04");
            // var li05 = document.getElementById("li05");
            // var box = document.getElementById("box");
            //上面的語句咱們使用函數來封裝起來
            var li01 = $("li01");
            var li02 = $("li02");
            var li03 = $("li03");
            var li04 = $("li04");
            var li05 = $("li05");
            var box = $("box");
            //2.監聽鼠標事件
            // li01.onmouseover = function (ev1) {
            //     box.style.background = 'url("img/img_01.png") no-repeat';
            // };
            // li02.onmouseover = function (ev2) {
            //     box.style.background = 'url("img/img_02.png") no-repeat';
            // };
            // li03.onmouseover = function (ev3) {
            //     box.style.background = 'url("img/img_03.png") no-repeat';
            // };
            // li04.onmouseover = function (ev4) {
            //     box.style.background = 'url("img/img_04.png") no-repeat';
            // };
            // li05.onmouseover = function (ev5) {
            //     box.style.background = 'url("img/img_05.png") no-repeat';
            // };
            li01.onmouseover = function (ev1) {
                changeImg("img/img_01.png")
            };
            li02.onmouseover = function (ev1) {
                changeImg("img/img_02.png")
            };
            li03.onmouseover = function (ev1) {
                changeImg("img/img_03.png")
            };
            li04.onmouseover = function (ev1) {
                changeImg("img/img_04.png")
            };
            li05.onmouseover = function (ev1) {
                changeImg("img/img_05.png")
            };
            //這樣咱們定義了鼠標的顯示狀況就能夠來展現大圖了
            //接下來咱們封裝函數，有大批量的重複代碼

        }

        /**
         * 根據id獲取標籤
         * @param [string} id
         */
        function $(id) {   //$
            return typeof id === 'string'? document.getElementById(id):null;
        }

        /**
         *
         * @param {string}tag
         * @param {string}imgSrc
         */
        function changeImg(imgSrc) {
            box.style.background = 'url("'+ imgSrc + '") no-repeat';
        }


    </script>
</body>
</html>

2、若是使用閉包也可達到上面的效果

window.onload = function (ev6) {
            //1.獲取須要的標籤
            var box = document.getElementById("box");
            var allList = box.getElementsByTagName("li");

            //2.監聽鼠標進入li標籤
            for(var i=0;i<allList.length;i++){
                //2.1取出單獨的li標籤
                var sLi = allList[i];
                // sLi.setAttribute("index",i+1);//複習設置屬性的方法setAttribute
                // sLi.onmouseover = function (ev7) {
                //     console.log(this);
                //     console.log(this.getAttribute("index"));//獲取這個li的index值
                // }
                //上面五行等價去下面,使用了閉包的知識，下次連載咱們再講
                (function (tag) {
                    sLi.onmouseover = function (ev9) {//複習onmouseover就是鼠標滑過這個模塊以後要乾的活兒
                        console.log(tag);
                        box.style.background =  'url("img/img_0'+ tag + '.png") no-repeat';
                    }
                })(i+1)
            }
        }