图片自行换掉即可查看效果，原理就是基于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. Git 各指令的本质

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

  2. HarmonyOS NEXT应用开发案例—自定义日历选择器

    介绍 本示例介绍通过CustomDialogController类显示自定义日历选择器. 效果图预览 使用说明 加载完成后显示主界面,点当前日期后会弹出日历选择器,选择日期后会关闭弹窗,主页面日期会变 ...

  3. OpenYurt 之 Yurthub 数据过滤框架解析

    简介:OpenYurt 是业界首个非侵入的边缘计算云原生开源项目,通过边缘自治,云边协同,边缘单元化,边缘流量闭环等能力为用户提供云边一体化的使用体验.在 Openyurt 里边缘网络可以使用数据过滤 ...

  4. 6 张图带你彻底搞懂分布式事务 XA 模式

    简介: XA 协议是由 X/Open 组织提出的分布式事务处理规范,主要定义了事务管理器 TM 和局部资源管理器 RM 之间的接口.目前主流的数据库,比如 oracle.DB2 都是支持 XA 协议的 ...

  5. 实时计算 Flink 版总体介绍

    简介: 实时计算 Flink 版(Alibaba Cloud Realtime Compute for Apache Flink,Powered by Ververica)是阿里云基于 Apache ...

  6. 干货｜一文读懂阿里云数据库Autoscaling是如何工作的

    简介: 阿里云数据库实现了其特有的Autosaling能力,该能力由数据库内核.管控及DAS(数据库自治服务)团队共同构建,内核及管控团队提供了数据库Autoscaling的基础能力,DAS则负责性能 ...

  7. iOS 端容器之 WKWebView 那些事

    ​简介: 本文主要是关于在端容器设计开发过程中,WKWebView 使用上遇到的一些问题和解决办法​ 作者 | 驽良 来源 | 阿里技术公众号 一  背景 熟悉 iOS\macOS Hybrid 混合 ...

  8. [FE] JS 判断当前是否在微信浏览器中的最新代码

    注意以下使用了 const 定义未改变的变量,没有使用 var. function isWeChatBrowser () { const ua = window.navigator.userAgent ...

  9. PHP vs Golang ? 想什么呢 ! What Are You Thinking !

    在使用 PHP 多年之后,我对 PHP 的优势和劣势已经非常清楚,与后起之秀 Golang 相比,两者已经不在一个重量级. PHP 更像是 70 kg 级别的选手,脚本语言,极速开发,部署方便,性能可 ...

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

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