js实现百度换肤功能

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

Princess_ya

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

阅读量533

点赞数

分类专栏： DOM 文章标签：前端 javascript 学习

本文链接：https://blog.csdn.net/Princess_ya/article/details/125794824

版权

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

摘要由CSDN通过智能技术生成

点击图片实现换肤

实现思路：

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、遍历数组