js 实现仿百度换肤效果
图片自行换掉即可查看效果，原理就是基于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 实现仿百度换肤效果的更多相关文章
- python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- javascript 入门之简单换肤效果
大家好,我是小强老师,这里简单入门 做一个换肤效果 效果如图所示: 这个案例思路分为两部分: 获取元素对象. var pic1 = document.getElementById('pic1'); v ...
- javascript进行百度换肤 和显示隐藏一个窗口的操作
简单的运用javascript来进行百度换肤的操作 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 简单实现WPF界面控件换肤效果
效果如下如图:选择皮肤颜色 1.首先新建一个如图界面: 选择匹夫下拉框Xaml代码如下:三种颜色选项,并触发SelectionChanged事件 <ComboBox Height="2 ...
- js实现换肤效果
一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 ...
- 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...
- JavaScript仿百度图片浏览效果（转载）
转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...
- 点滴积累【JS】---JS实现仿百度模糊搜索效果
效果: HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="In ...
- ArcGIS JS 学习笔记1 用ArcGIS JS 实现仿百度地图的距离量测和面积量测
一.开篇 在博客注册了三年,今天才决定写第一篇博客,警告自己不要懒!!! 二.关于ArcGIS JS 版本选择 在写这篇博客时ArcGIS JS 4.0正式版已经发布.它和3.x版本的不同是,Map不 ...
随机推荐
- ImageJ软件使用教程（二）：图像测量
目录 图像比例尺 加载图像 设置比例尺 标注比例尺 测量长度面积 测量长度 测量面积 参考资料 图像比例尺 使用ImageJ软件测量图像中的长度.面积等信息时,需要先设置图像的比例尺,比例尺用于将图像 ...
- 消息队列 RabbitMQ 遇上可观测--业务链路可视化
简介: 本篇文章主要介绍阿里云消息队列 RabbitMQ 版的可观测功能.RabbitMQ 的可观测能力相对开源有了全面的加强,为业务链路保驾护航. 作者:文婷.不周 本篇文章主要介绍阿里云消息队列 ...
- 使用率激增 250%，这份报告再次将 Serverless 推向幕前
简介: 本文是对 Datadog 最新的一份 Serverless 报告的解读,欢迎大家留言讨论. 本文是对 Datadog 最新的一份 Serverless 报告的解读,欢迎大家留言讨论. 每项新 ...
- 网易云音乐音视频算法的 Serverless 探索之路
简介: 基于音视频算法服务化的经验,网易云音乐曲库团队与音视频算法团队一起协作,一起共建了网易云音乐音视频算法处理平台,为整个云音乐提供统一的音视频算法处理平台.本文将分享我们如何通过 Server ...
- 全球首款乘云而来的存储产品CDS诞生！
9月22日,阿里云发布全球首款"云定义存储"(Cloud Defined Storage,CDS)产品.作为一款本地部署的分布式存储产品,阿里云CDS拥有与公共云存储相同的技术架 ...
- Vue2源码解析-源码调试与核心流程梳理图解
现在VUE3已经有一段时间了,也慢慢普及起来了.不过因为一直还在使用VUE2的原因还是去了解和学了下它的源码,毕竟VUE2也不会突然就没了是吧,且VUE3中很多原理之类的也是类似的.然后就准备把VUE ...
- EPAI手绘建模APP资源管理和模型编辑器2
g) 矩形 图 26模型编辑器-矩形 i. 修改矩形的中心位置. ii. 修改矩形的长度和宽度. h) 正多边形 图 27模型编辑器-内接正多边形 图 28模型编辑器-外切正多边形 i. 修改正多 ...
- SpringMVC学习二（日期参数/数据保存/重定向）
接受的参数为日期类型 controller进行数据保存 Controller如何进行重定向跳转 1.对于前端页面传来日期类型的数据时如何进行处理,有两种方法 1.1在对应的Controller中插入代 ...
- SAP集成技术（七）集成解决方案咨询方法论（ISA-M）
目前,ISA-M 主要以 Microsoft PowerPoint 演示文稿的形式提供.可以在 SAP Community 博客文章(https://blogs.sap.com/)以及关于ISA-M ...
- Github Copilot绑定Jetbrains IDE无效的解决方案
在Github中进行教育认证后不会自动开通Copilot功能,因此,在进行了Github教育认证之后,在使用之前要进入Github Copilot官网开通Coplilot,如果忽略了这一点,绑定Jet ...