javascript案例5——壁纸切换、背景换肤

最新推荐文章于 2024-04-19 09:43:41 发布

耶啵奶膘

最新推荐文章于 2024-04-19 09:43:41 发布

阅读量1.4k

点赞数 4

分类专栏： javascript 文章标签： javascript css css3

本文链接：https://blog.csdn.net/xulihua_75/article/details/124637805

版权

javascript 专栏收录该内容

55 篇文章 6 订阅

订阅专栏

一、案例描述

点击小图片能更改整个页面的背景图片。

二、案例效果演示

请添加图片描述

三、案例局部代码

css代码：

<style>
   html,
    body {
        height: 100%;
    }
    
    body {
        background: url(./img/bg1.png) no-repeat;
        background-size: cover;
    }
    
    ul {
        overflow: hidden;
        background-color: #fff;
        margin: 0;
        padding: 5px;
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translate(-50%);
    }
    
    ul li {
        list-style: none;
        float: left;
        margin-right: 5px;
    }
    
    ul li:last-child {
        margin-right: 0;
    }
    
    ul li img {
        width: 100px;
        height: 60px;
        display: block;
        object-fit: cover;
    }
    
    ul li img:hover {
        box-shadow: 0 0 5px #000;
    }
</style>

HTML代码：

<ul>
     <li><img src="./img/bg1.png" /></li>
     <li><img src="./img/bg2.jpg" /></li>
     <li><img src="./img/bg3.jpg" /></li>
     <li><img src="./img/bg4.jpeg" /></li>
</ul>

js代码：

<script>
  var imgs = document.querySelectorAll('img');
   for (var i = 0; i < imgs.length; i++) {
       imgs[i].onclick = function() {
           document.body.style.backgroundImage = 'url(' + this.src + ')';
       }
   }
</script>

四、案例整体代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>壁纸切换</title>
    <style>
        html,
        body {
            height: 100%;
        }
        
        body {
            background: url(./img/bg1.png) no-repeat;
            background-size: cover;
        }
        
        ul {
            overflow: hidden;
            background-color: #fff;
            margin: 0;
            padding: 5px;
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translate(-50%);
        }
        
        ul li {
            list-style: none;
            float: left;
            margin-right: 5px;
        }
        
        ul li:last-child {
            margin-right: 0;
        }
        
        ul li img {
            width: 100px;
            height: 60px;
            display: block;
            object-fit: cover;
        }
        
        ul li img:hover {
            box-shadow: 0 0 5px #000;
        }
    </style>
</head>

<body>
    <ul>
        <li><img src="./img/bg1.png" /></li>
        <li><img src="./img/bg2.jpg" /></li>
        <li><img src="./img/bg3.jpg" /></li>
        <li><img src="./img/bg4.jpeg" /></li>
    </ul>
    <script>
        var imgs = document.querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

五、总结

1.获取所有的图片元素。
2.对图片集合使用for循环进行遍历，并挨个绑定事件。
3.绑定的事件执行的操作是：点哪张小图片，就让网页背景图片的路径更改成和小图片一样的。

耶啵奶膘

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
javascript案例5——壁纸切换、背景换肤

一、案例描述点击小图片能更改整个页面的背景图片。二、案例效果演示三、案例局部代码css代码：<style> html, body { height: 100%; } body { background: url(./img/bg1.png) no-repeat; background-size: cover; } ul { overflow: hidden
复制链接

扫一扫