图片自行换掉即可查看效果，原理就是基于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. Python Flask获取iOS的UDID

    测试iOS app时候,我们可以安装以下4种类型的包 : AdHoc                 -- 一般为正式环境验证AppStore             -- 上传AppStore,只有 ...

  2. var ,let和const三者之间的区别

    var 声明变量可以被修改,可以被重复声明.有变量提升(写的位置和使用时候的位置不一样). let声明变量可以被修改,,但不能重复声明.如文件中有一个let a = 0;后面就不能在定义let a=* ...

  3. 如何使用Delta Lake构建批流一体数据仓库

    ​简介:Delta Lake是一个开源存储层,它为数据湖带来了可靠性.Delta Lake提供了ACID事务.可扩展的元数据处理,并统一了流式处理和批处理数据处理.Delta-Lake运行在现有数据湖 ...

  4. OceanBase时序数据库CeresDB正式商用 为用户提供安全可靠的数据存储管理服务

    简介: OceanBase完成OLAP和OLTP双重能力并行后,向数据管理领域多模方向迈出第一步. 近日,在数据库OceanBase3.0峰会上,OceanBase CEO杨冰宣布首个时序数据库产品C ...

  5. [GPT] 哪些职业面临 AI 威胁？

      随着人工智能技术的不断发展和应用,一些重复性.机械化或标准化程度高的职业可能会面临被自动化取代的威胁.例如: 工厂生产线上的装配工人,因为许多工厂已经开始使用自动化机器人完成装配任务: 行政助理, ...

  6. [DApp] ethers.js VS Moralis

    ether.js 是 Web3 封装的 js 库,特别适合以太坊平台. Moralis 不仅是 Web3 的封装,还是一体化解决方案,包括服务端部署方案和适配各种链,使用范围更广. 在选择上,主要还是 ...

  7. Etcd 可视化管理工具，GUI 客户端。

    Etcd Assistant--Etcd 可视化管理工具,GUI 客户端. 下载地址:http://www.redisant.cn/etcd 主要功能: 支持多标签页,同时连接到多个集群 以漂亮的格式 ...

  8. 在FPGA中何时用组合逻辑或时序逻辑

    在设计FPGA时,大多数采用Verilog HDL或者VHDL语言进行设计(本文重点以verilog来做介绍).设计的电路都是利用FPGA内部的LUT和触发器等效出来的电路. 数字逻辑电路分为组合逻辑 ...

  9. SAP Adobe Form 教程一 简单示例

    马上需要用到adobe form,这里搬运一篇教程学习下. 英文原文:SAP Adobe Interactive Form Tutorial. Part I. First Adobe Form 本文链 ...

  10. Linux基础-02：Linux目录操作命令

    Linux中目前可以识别的命令有上万条,如果没有分类,那么学习起来一定痛苦不堪. 所以我们把命令分门别类,主要是为了方便学习和记忆. 下面我们先来学习最为常用的和目录相关的操作命令 最近无意间获得一份 ...