实现百度换肤功能

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

具体功能:

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

代码如下:

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

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

相关文章
|
存储 运维 达摩院
清能互联:智能优化上云,共建能源互联
能源互联网,行业智能优化先行者
458 0
清能互联:智能优化上云,共建能源互联
|
存储 Web App开发 算法
二进制究竟有什么用?齐姐带你看看那些好玩儿的「位操作」
本篇终于讲到了齐姐文章里常常出现的分割线! 计算机说到底就是 0 和 1,所有的数在内存中都是以二进制的形式储存的。 而位操作,或者说位运算,就是直接对内存中的二进制位进行操作。 位运算可以说是我们的基本功,今天这篇文章就从以下角度和大家一起玩转位运算。
389 0
二进制究竟有什么用?齐姐带你看看那些好玩儿的「位操作」
|
机器学习/深度学习 新零售 关系型数据库
【云周刊】第168期:本年度全球唯一:MySQL社区2018年度公司贡献奖颁给阿里云
本年度全球唯一:MySQL社区2018年度公司贡献奖颁给阿里云,本年度全球唯一:MySQL社区2018年度公司贡献奖颁给阿里云,【Techday60】新零售天津-新零售分支网络接入方案 ...更多精彩内容,尽在云周刊!
4075 0
|
4天前
|
人工智能 自然语言处理 JavaScript
2026年Windows+Ollama本地部署OpenClaw保姆级教程:本地AI Agent+阿里云上快速搭建
2026年OpenClaw凭借本地部署、私有化运行的特性,成为打造个人智能体的核心工具,而Ollama作为轻量级本地大模型管理工具,能让OpenClaw摆脱对云端大模型的依赖,实现**本地推理、数据不泄露、全流程私有化**的智能体验。本文基于Windows 11系统,从硬件环境准备、Ollama安装与模型定制、OpenClaw部署配置、技能扩展到常见问题排查,打造保姆级本地部署教程,同时补充阿里云OpenClaw(Clawdbot)快速部署步骤,兼顾本地私有化需求与云端7×24小时运行需求,文中所有代码命令均可直接复制执行,确保零基础用户也能快速搭建属于自己的本地智能体。
5758 32
|
5天前
|
人工智能 JSON JavaScript
手把手教你用 OpenClaw + 飞书,打造专属 AI 机器人
手把手教你用 OpenClaw(v2026.2.22-2)+ 飞书,10分钟零代码搭建专属AI机器人!内置飞书插件,无需额外安装;支持Claude等主流模型,命令行一键配置。告别复杂开发,像聊同事一样自然对话。
2485 7
手把手教你用 OpenClaw + 飞书,打造专属 AI 机器人
|
11天前
|
存储 人工智能 负载均衡
阿里云OpenClaw多Agent实战宝典:从极速部署到AI团队搭建,一个人=一支高效军团
在AI自动化时代,单一Agent的“全能模式”早已无法满足复杂任务需求——记忆臃肿导致响应迟缓、上下文污染引发逻辑冲突、无关信息加载造成Token浪费,这些痛点让OpenClaw的潜力大打折扣。而多Agent架构的出现,彻底改变了这一现状:通过“单Gateway+多分身”模式,让一个Bot在不同场景下切换独立“大脑”,如同组建一支分工明确的AI团队,实现创意、写作、编码、数据分析等任务的高效协同。
4540 29
|
3天前
|
人工智能 自然语言处理 机器人
保姆级教程:Mac本地搭建OpenClaw及阿里云上1分钟部署OpenClaw+飞书集成实战指南
OpenClaw(曾用名Clawdbot、Moltbot)作为2026年最热门的开源个人AI助手平台,以“自然语言驱动自动化”为核心,支持对接飞书、Telegram等主流通讯工具,可替代人工完成文件操作、日历管理、邮件处理等重复性工作。其模块化架构适配多系统环境,既可以在Mac上本地化部署打造私人助手,也能通过阿里云实现7×24小时稳定运行,完美兼顾隐私性与便捷性。
1669 2

热门文章

最新文章