图片自行换掉即可查看效果，原理就是基于tab切换的效果实现的

效果图

 1 <!DOCTYPE html>

 2 <html>

 3

 4 <head>

 5   <meta charset="UTF-8">

 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7   <title>仿百度换肤效果</title>

 8   <style>

 9     body {

10       height: 100%;

11       background: url(img/bg1.jpg) no-repeat top center;

12       background-size: cover;

13     }

14

15     * {

16       margin: 0;

17       padding: 0;

18     }

19

20     ul,

21     li {

22       list-style: none;

23     }

24

25     .list li img {

26       width: 100%;

27     }

28

29     .list {

30       display: flex;

31       justify-content: center;

32       margin-top: 100px;

33     }

34

35     .list li {

36       width: 150px;

37       cursor: pointer;

38     }

39

40     .trans {

41       transition: all .5s;

42     }

43   </style>

44 </head>

45

46 <body>

47   <ul class="list">

48     <li><img src="img/bg1.jpg" alt=""></li>

49     <li><img src="img/bg2.jpg" alt=""></li>

50     <li><img src="img/bg3.jpg" alt=""></li>

51     <li><img src="img/bg4.jpg" alt=""></li>

52   </ul>

53

54   <script>

55     var imgs = document.querySelector('.list').querySelectorAll('img');

56     for (var i = 0; i < imgs.length; i++) {

57       imgs[i].onclick = function () {

58         // console.log(this.src)

59         document.body.style.className = 'trans';

60         document.body.style.backgroundImage = 'url(' + this.src + ')';

61       }

62     }

63   </script>

64 </body>

65

66 </html>

js 实现仿百度换肤效果的更多相关文章

  1. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  2. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  3. javascript 入门之简单换肤效果

    大家好,我是小强老师,这里简单入门 做一个换肤效果 效果如图所示: 这个案例思路分为两部分: 获取元素对象. var pic1 = document.getElementById('pic1'); v ...

  4. javascript进行百度换肤 和显示隐藏一个窗口的操作

    简单的运用javascript来进行百度换肤的操作 <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. 简单实现WPF界面控件换肤效果

    效果如下如图:选择皮肤颜色 1.首先新建一个如图界面: 选择匹夫下拉框Xaml代码如下:三种颜色选项,并触发SelectionChanged事件 <ComboBox Height="2 ...

  6. js实现换肤效果

    一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 ...

  7. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  8. JavaScript仿百度图片浏览效果（转载）

    转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...

  9. 点滴积累【JS】---JS实现仿百度模糊搜索效果

    效果: HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="In ...

  10. ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测

    一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...

随机推荐

  1. 使用mmdetection训练自己的coco数据集(免费分享自制数据集文件)

    首先需要准备好数据集,这里有labelme标签数据转coco数据集标签的说明:labelme转coco数据集 - 一届书生 - 博客园 (cnblogs.com) 1. 准备工作目录 我们的工作目录, ...

  2. 鸿蒙HarmonyOS实战-ArkUI组件（Shape）

    一.Shape Shape组件是用于创建2D形状和粒子效果的组件.它可以创建包括圆形.正方形.三角形和多边形等基本形状,同时还可以自定义形状.Shape组件创建各种不同的效果,例如火花.烟雾.雨滴等. ...

  3. Git 各指令的本质

    前言 作为当前世界上最强大的代码管理工具Git相信大家都很熟悉,但据我所知有很大一批人停留在clone.commit.pull.push...的阶段,是不是对rebase心里没底只敢用merge? 碰 ...

  4. 深度解读《深度探索C++对象模型》之返回值优化

    接下来我将持续更新"深度解读<深度探索C++对象模型>"系列,敬请期待,欢迎关注!也可以关注公众号:iShare爱分享,自动获得推文和全部的文章列表. 没有启用返回值优 ...

  5. 使用GitHub Actions和GitHub pages实现前端项目的自动打包部署

    1. 引言 As we all know,前端部署项目是比较简单的,通常情况下只需要将打包的产物(index.html..js文件..css文件等)放在Web服务器下就,这种叫静态资源托管,成本是比较 ...

  6. 深度解读 OpenYurt：从边缘自治看 YurtHub 的扩展能力

    作者 | 新胜  阿里云技术专家 导读:OpenYurt 开源两周以来,以非侵入式的架构设计融合云原生和边缘计算两大领域,引起了不少行业内同学的关注.阿里云推出开源项目 OpenYurt,一方面是把阿 ...

  7. 阿里云重磅发布业务中台产品 BizWorks，中台发展进入下一个阶段

    ​简介: 业务中台产品BizWorks重磅发布,这可以看作是阿里云在 "做厚中台" 战略上继 "云钉一体"之后的又一个新动作! 10 月 19 日,2021 云 ...

  8. [FAQ] 修改了Dockerfile 之后，运行 docker-compose up --force-recreate 时还是报之前构建时的错误？

      因为 Docker Compose 的 --force-recreate 选项只会强制重新创建容器,而不会重新构建镜像. 因此,如果你修改了Dockerfile,需要确保重新构建新的镜像. 你可以 ...

  9. [CosmWasm] 安装 Rust 和 wasm32 (Linux & Mac)

      先用 rustup 安装 Rust 语言,再确保你拥有wasm32目标. $ rustup default stable $ cargo version # If this is lower th ...

  10. dotnet 警惕 ConcurrentDictionary 使用 FirstOrDefault 获取到非预期的首项

    在 dotnet 里面的 ConcurrentDictionary 是一个支持并发读写的线程安全字典,在这个字典里面有一些行为会出现随机性,即多次执行相同的代码返回的结果可能不相同.本文记录在 Con ...