实现百度换肤功能

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

具体功能:

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

代码如下:

<!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>

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

相关文章
|
API 开发者
百度批量算路功能使用
百度批量算路功能使用
102 0
|
数据可视化 定位技术 API
百度地图开发:海量点、测距以及定位聚合功能
百度地图开发:海量点、测距以及定位聚合功能
309 0
|
5月前
|
数据采集 JavaScript 前端开发
详尽分享网站网页中加入各种分享按钮功能百度分享
详尽分享网站网页中加入各种分享按钮功能百度分享
123 0
|
5月前
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
77 0
|
6月前
|
人工智能 编解码 数据安全/隐私保护
才发现百度自带的AI图片助手这么好用,去水印、画质优化、AI扩图、涂抹消除等功能一应俱全!
才发现百度自带的AI图片助手这么好用,去水印、画质优化、AI扩图、涂抹消除等功能一应俱全!
995 0
|
6月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
218 0
|
移动开发 小程序 JavaScript
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
564 0
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
290 0
|
定位技术
echarts引入百度地图通过脚本bmap.min.js解决关闭底图可点功能的底层解决方案
echarts引入百度地图通过脚本bmap.min.js解决关闭底图可点功能的底层解决方案
160 0
|
6月前
|
关系型数据库 MySQL Shell
百度搜索:蓝易云【Shell脚本实现Mysql持续kill功能】
将以上代码保存为一个名为 `kill_mysql.sh`的文件,并确保该文件具有执行权限(可以使用 `chmod +x kill_mysql.sh`命令赋予执行权限)。然后在终端中运行该脚本即可实现MySQL的持续kill功能。
73 0
下一篇
无影云桌面