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不 ...
随机推荐
- 实训篇-Html-计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 实训篇-Html-超链接a标签使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CC1TransformedMap链学习
跟着看了白日梦组长的视频,记录一下调试学习过程 CC1链学习 TransformedMap链 ObjectInputStream.readObject() AnnotationInvocationHa ...
- 说说你对Node.js 的理解？优缺点？应用场景？
一.是什么 Node.js 是一个开源与跨平台的 JavaScript 运行时环境 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核),利用事件驱动.非阻塞和异步输 ...
- 向量数据库Chroma学习记录
一 简介 Chroma是一款AI开源向量数据库,用于快速构建基于LLM的应用,支持Python和Javascript语言.具备轻量化.快速安装等特点,可与Langchain.LlamaIndex等知名 ...
- 客户端单元测试实践——C++篇
简介: 我们团队在手淘中主要负责BehaviX模块,代码主要是一些逻辑功能,很少涉及到UI,为了减少双端不一致问题.提高性能,我们采用了将核心代码C++化的策略.由于团队项目偏底层,测试同学难以完全覆 ...
- [GPT] Vue 的 methods 中使用了 addEventListener，如何在 addEventListener 的匿名函数参数中访问 Vue data 变量
在 Vue 的 methods 方法中使用 addEventListener时,你可以使用 箭头函数 来访问 Vue 实例的数据. 箭头函数不会创建自己的作用域,而是继承父级作用域的上下文.以下是 ...
- [ELK] Docker 运行 Elastic Stack 支持 TLS 的两种简单方式
第一种就是 按照官方文档进行配置,指定证书位置开启. Run the Elastic Stack in Docker with TLS enabled. 第二种就是 9200 端口只暴露给本机,127 ...
- WPF 已知问题 清空 CollectionView 的 SortDescriptions 可能抛出空异常
本文记录一个 WPF 的已知问题,在通过 CollectionViewSource 获取到 CollectionView 之后,如果 CollectionViewSource 对象已被 GC 回收,将 ...
- dotnet 5 的 bin 文件夹下的 ref 文件夹是做什么用的
本文来和大家聊聊在 dotnet 5 和 dotnet 6 或更高版本的 dotnet 构建完成,在 bin 文件夹下,输出的 ref 文件夹.在此文件夹里面,将会包含项目程序集同名的 dll 文件, ...