案例练习 百度换肤效果

案例要求

点击小图片时更换页面的背景图片

代码

<!-- 
    一个小小的案例练习，竟然遇到这么多的问题。程序真的要自己写才能真正地掌握
    看着视频自以为懂了，其实没有动手实践不算完全理解的
    1. css忘了很多，通过此案例明白了清除浮动
    2. img下方空隙的解决方法 display:block;
    3. 不够细心，获取事件源querySelectorAll用成了querySelector找了很久才发现，浪费了半个多小时！
    2020年2月24日 17:19:26
    《冬夜读书示子聿》  陆游
    古人学问无遗力，少壮工夫老始成。
    纸上得来终觉浅，绝知此事要躬行。
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        .baidu { 
            overflow: hidden; /*清除浮动，子盒子浮动，脱标，父盒子没有高度 */
            /* 必须给ul一个宽度 用auto才能居中 */
            width: 410px; 
            margin: 100px auto; 
            background-color: #fff;
            padding-top: 3px;
        }
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        .baidu img {
            width: 100px;
            /* display: block;加入此句可以消除图片下方3px空白缝隙的问题 */
        }
    </style>
</head>
<body>
    <ul class="baidu">
        <li><img src="images/1.jpg" alt=""></li><!-- 为何li的底部比img低？因为img是行内块元素 要跟文字基线对齐 -->
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
    </ul>
    <script>
        // var lis = document.querySelectorAll('li');
        //获取事件源
        var imgs = document.querySelector('.baidu').querySelectorAll('img'); //后面获取img要用querySelectorAll
        //注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                // document.body.style.backgroundImage = 'URL(images/2.jpg)'; //所有的属性都是字符串
                document.body.style.backgroundImage = 'URL(' + this.src +')'; //所有的属性都是字符串
            }       
        }
    </script>
</body>
</html>
posted @ 2020-02-24 17:30  seaning  阅读(271)  评论(0)    收藏  举报