前端-自己设计一个网页换皮肤效果

最近在跟着黑马pink老师学习前端，看到一个给网页换皮肤的效果，觉得很有意义的。

就自己跟着做了一下，其实代码实现很简单，只需要几行代码即可实现，现在在这里记录一下。

因为目前我还只是一个前端学习的菜鸟，在这里发的内容，也是自己学习的一些记录。

还望大佬们可以多指导。

 

网页最后实现的效果如图所示：

有四张背景图片，当你点击其中一张图片时，网页的背景就被换成相应的图片。

下面是实现的代码:

 1 <style>
 2     *{
 3         margin: 0;
 4         padding: 0;
 5     }
 6     body{
 7         background: url("images/1.jpg") no-repeat center top;
 8     }
 9     li{
10         list-style: none;
11     }
12     .baidu{
13         overflow: hidden;
14         margin: 100px auto;
15         background-color: #ffffff;
16         width: 410px;
17         padding-top: 3px;
18     }
19     .baidu li{
20         float: left;
21         margin: 0 1px;
22         cursor:pointer;
23     }
24     .baidu img{
25         width: 100px;
26         height: 110px;
27     }
28 </style>
29 <body>
30 <ul class="baidu">
31     <li><img src="images/1.jpg"></li>
32     <li><img src="images/2.jpg"></li>
33     <li><img src="images/3.jpg"></li>
34     <li><img src="images/4.jpg"></li>
35 </ul>
36 <script>
37     //1.获取图片元素
38     var imgs=document.querySelector('.baidu').querySelectorAll('img');
40     //2.循环注册事件
41     for(var i=0;i<imgs.length;i++){
42     imgs[i].onclick=function () {
43     //this.src就是我们点击图片的路径
44     //把这个路径给body就可以了
45     document.body.style.backgroundImage='url('+ this.src+')';
46 }
47     }
48 </script>
49 </body>

代码就只有这几行，感兴趣的小伙伴们可以自己去试试，改装一下自己的网页喔。

posted @ 2021-01-04 11:15  小周啊  阅读(215)  评论(0)    收藏  举报