实现百度换肤功能

简介: 具体功能:点击图片浏览器背景变为所点的图片

具体功能:

点击图片浏览器背景变为所点的图片

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .baidu{
      overflow: hidden;
      margin: 50px auto;
    }
    body{
      width: 99%;
      height: 100vh;
      background:no-repeat center top;
      background-size: 100%;
    }
    li {
      list-style: none;
    }
    li img{
      width: 100px;
      height: 150px;
    }
    .baidu li {
      float: left;
      margin: 0 1px;
      cursor: pointer;
    }
    .baidu img{
      width: 100px;
    }
  </style>
  <body>
    <ul class="baidu">
      <li><img src="../img/pyy.jpg" alt=""></li>
      <li><img src="../img/pyy1.jpg" alt=""></li>
      <li><img src="../img/pyy2.jpg" alt=""></li>
    </ul>
    <script>
      var imgs = document.querySelector('.baidu').querySelectorAll('img');
      for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function() {
          document.body.style.backgroundImage = 'url(' + this.src + ')';
        }
      }
    </script>
  </body>
</html>

以上就是本章的全部内容,感谢您的阅读。

相关文章
|
6月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
77 0
|
JSON 小程序 JavaScript
|
6月前
2024简约唯美的个人引导页源码
2024简约唯美的个人引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
157 4
|
8月前
超级好看动态视频引导页源码
超级好看动态视频引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
54 0
超级好看动态视频引导页源码
|
移动开发 前端开发 JavaScript
移动端H5网页开发常见问题汇总
H5网页开发常见问题汇总
628 0
|
前端开发
前端换肤,聊一聊主题切换那些事
前端换肤,聊一聊主题切换那些事
193 0
|
缓存 前端开发 JavaScript
换肤 - 一文看破常用的网站主题切换方式
现在大部分主流网站都不约而同的添加了暗色主题,让我们一起看看这些常用的切换方案、实现方式以及注意点。
|
Web App开发 搜索推荐
Chrome 私人珍藏-stylus插件实现个性化百度界面定制
Chrome 私人珍藏-stylus插件实现个性化百度界面定制
355 0
Chrome 私人珍藏-stylus插件实现个性化百度界面定制
|
Web App开发 前端开发 iOS开发
04-移动端开发教程-在线字体图标
在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1. 为什么要用在线字体 问题 精灵图(雪碧图)用作背景的时候不能轻易的放大缩小。
1391 0