设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
搜索附件  
自丢网 › 附件中心 › 建站程序/IT教程 › JavaScript教程 › 百度换肤效果js教程.jpg

板块导航

热门下载

左侧广告
版权所有：自丢网
For 2020-2050 © zidiu.com

百度换肤效果js教程.jpg

 

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>

  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>
复制代码
输出效果演示图：