深圳市金黑网络技术有限公司:主营高端网站建设,网络推广,商城/系统开发,公众号小程序app开发等业务。
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.     <script>
  37.         var body = document.body;
  38.         var imgs = document.querySelector('#baidu').querySelectorAll('img');
  39.         for (i = 0; i < imgs.length; i++) {
  40.             imgs[i].onclick = function() {
  41.                 body.style.backgroundImage = 'url(' + this.src + ')';
  42.             }
  43.         }
  44.     </script>
复制代码
输出效果演示图:

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

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

推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

相关文章

发布主题
  • 网站建设

    高端网站设计制作

  • 模板制作

    仿站/效果图转模板

  • 网络推广

    关键词优化/全网推广

  • 技术维护

    网站维护/异常处理

  • 小程序开发

    公众号/小程序开发

  • 系统开发

    商城系统/各类系统开发

  • 定制开发流程

    业务咨询 | 提交需求 | 报价报时 | 付款开工

    联系我们
  • 今日更新:0 昨日更新:0
  • 会员总数:462 模板总数:9876
全国最大PB建站模板下载平台
在线技术QQ

515138

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们