js实现百度换肤功能

最新推荐文章于 2024-03-06 23:02:33 发布

原创最新推荐文章于 2024-03-06 23:02:33 发布 · 625 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #学习

DOM 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用JavaScript来实现点击图片切换界面皮肤的功能。主要思路包括获取图片节点，存储图片路径数组，遍历数组并绑定点击事件，以及通过修改body的背景图片URL来达到换肤效果。

点击图片实现换肤

实现思路：

1、获取到界面的图片节点

2、利用数据驱动界面的思想，把图片的路径保存在数组中

3、遍历数组

4、绑定图片的点击事件

5、获取到body往里面添加背景图片的URL链接

<style>
        body {
            background-image: url(./img/two.jpg);
        }

        img {
            width: 200px;
            height: 150px;
        }
    </style>
</head>

<body>
    <img src="./img/two.jpg" alt="">
    <img src="./img/one.jpg" alt="">
    <script>
        /* 
        1、获取到界面的图片节点
        2、利用数据驱动界面的思想，把图片的路径保存在数组中
        3、遍历数组
        4、绑定图片的点击事件
        5、获取到body往里面添加背景图片的URL链接
        
        */

        var img1 = document.getElementsByTagName('img')
        var arr = ['./img/two.jpg', './img/one.jpg']

        for (let i = 0; i < arr.length; i++) {
            img1[i].onclick = function () {

                document.body.style.backgroundImage = `url('${arr[i]}')`

            }

        }
    </script>