图片自行换掉即可查看效果，原理就是基于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. Gowin 1nr-9k mipi测试

    本次实验是利用gowin 1nr-9k的开发板测试MIPI屏. 测试的屏是2.0寸的,接口如下: 接上IO就是RST和MIPI的时钟和数据接口,另外就是电源和地. Gowin的案例中,首先是软件要升级 ...

  2. Kafka的实现细节

    Kafka的实现细节 一.Topic和Partition 在Kafka中的每一条消息都有一个topic.一般来说在我们应用中产生不同类型的数据,都可以设置不同的主题.一个主题一般会有多个消息的订阅者, ...

  3. 三端一体计算方案：Unify SQL Engine

    简介: 本文将介绍数仓建设过程中面对三种计算模式,较低的研发效率.不可控的数据质量,以及臃肿数据接口服务的困境的解决方案. 背景 在漫长的数仓建设过程中,实时数仓与离线数仓分别由不同的团队进行独立建设 ...

  4. 2021年阿里云年中钜惠攻略，注册即可抽 iPhone 12 Pro 等好礼

    简介: 七月流火,燃情盛夏!值此季节,阿里云又推出了年中钜惠,精选百款产品,助力创业新势力.从7月26日开始,每天上午10点.下午4点将会放出爆款产品,进行限量秒杀,大家不要错过.注册登陆还可抽取 i ...

  5. Serverless 工程实践 | 细数 Serverless 的配套服务

    ​简介: 上文说到云计算的十余年发展让整个互联网行业发生了翻天覆地的变化,Serverless 作为云计算的产物,或者说是云计算在某个时代的表现,被很多人认为是真正意义上的云计算,关于"Se ...

  6. WPF 解决 ObservableCollection 提示 Cannot change ObservableCollection during a CollectionChanged event 异常

    本文告诉大家在使用 ObservableCollection 时,抛出 InvalidOperationException 异常,提示 Cannot change ObservableCollecti ...

  7. 2018-8-29-dotnet-core-2.1-使用阶梯编译

    title author date CreateTime categories dotnet core 2.1 使用阶梯编译 lindexi 2018-08-29 08:49:12 +0800 201 ...

  8. Spirng 当中 Bean的作用域

    Spirng 当中 Bean的作用域 @ 目录 Spirng 当中 Bean的作用域 每博一文案 1. Spring6 当中的 Bean的作用域 1.2 singleton 默认 1.3 protot ...

  9. 零侵入！试试这款Api接口文档生成器！

    大家好,我是 Java陈序员. 作为一名合格的程序员,不仅代码要写好,而且文档要写好. 虽然目前有成熟的框架可以快速生成接口文档,如大名鼎鼎的 Swagger.但是 Swagger 需要编写大量的注解 ...

  10. ADOBE FORM的一些相关资料

    虽然很多人觉得打印程序的开发很无聊(我也这么想),但在实际工作中,打印算是比较有意义的工作,所以还是值得学习的. 之前翻译过几篇Adobe Form的文章,其中的内容,可以帮助创建一些简单的打印示例, ...