背景底图更换

最新推荐文章于 2022-02-26 07:30:00 发布

团团ya

最新推荐文章于 2022-02-26 07:30:00 发布

阅读量361

点赞数 1

分类专栏：前端一文章标签：前端

本文链接：https://blog.csdn.net/yoki370/article/details/106432772

版权

前端一专栏收录该内容

6 篇文章 0 订阅

订阅专栏

如同所示：

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                background: url(images/11.jpg) no-repeat center top;
            }
            
            li {
                list-style: none;
            }
            
            .baidu {
                overflow: hidden;
                margin: 100px auto;
                background-color: #fff;
                width: 408px;
                padding-top: 5px;
            }
            
            .baidu li {
                float: left;
                margin: 0 1px;
                cursor: pointer;
            }
            
            .baidu img {
                width: 100px;
            }
        </style>
    </head>
    <body>
        <ul class="baidu">
               <li><img src="images/11.jpg"></li>
               <li><img src="images/12.jpg"></li>
               <li><img src="images/13.jpg"></li>
               <li><img src="images/14.jpg"></li>
           </ul>
           <script>
               // 1. 获取元素 
               var imgs = document.querySelector('.baidu').querySelectorAll('img');
               // console.log(imgs);
               // 2. 循环注册事件 
               for (var i = 0; i < imgs.length; i++) {
                   imgs[i].onclick = function() {
                       // this.src 就是我们点击图片的路径   images/2.jpg
                       // console.log(this.src);
                       // 把这个路径 this.src 给body 就可以了
                       document.body.style.backgroundImage = 'url(' + this.src + ')';
                   }
               }
           </script>
    </body>
</html>

团团ya

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
背景底图更换

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } ...
复制链接

扫一扫