js实现百度换肤效果案例演示

JavaScript实现百度换肤效果案例演示代码教程

1.     <style>
   
2.         body {
   
3.             background-repeat: no-repeat;
   
4.             background-size: cover;
   
5.         }
   
6.         
   
7.         ul {
   
8.             margin: 0;
   
9.             padding: 0;
   
10.             list-style: none;
    
11.         }
    
12.         
    
13.         #baidu {
    
14.             text-align: center;
    
15.             margin: 0 auto;
    
16.         }
    
17.         
    
18.         #baidu li {
    
19.             display: inline-block;
    
20.             cursor: pointer;
    
21.         }
    
22.         
    
23.         #baidu li img {
    
24.             width: 200px;
    
25.             border: 2px solid black;
    
26.             height: 80px;
    
27.         }
    
28.     </style>
    
29.     <div id="ziidu">
    
30.         <ul id='baidu'>
    
31.             <li><img src="1.jpg" alt=""></li>
    
32.             <li><img src="2.jpg" alt=""></li>
    
33.             <li><img src="3.jpg" alt=""></li>
    
34.         </ul>
    
35.     </div>
    
36. 
    
37.     <script>
    
38.         var body = document.body;
    
39.         var imgs = document.querySelector('#baidu').querySelectorAll('img');
    
40.         for (i = 0; i < imgs.length; i++) {
    
41.             imgs[i].onclick = function() {
    
42.                 body.style.backgroundImage = 'url(' + this.src + ')';
    
43.             }
    
44.         }
    
45.     </script>

复制代码

输出效果演示图：

js实现百度换肤效果案例演示