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不 ...
随机推荐
- Vue3 解构赋值失去响应式引发的思考
前言 vue3发布以来经历两年风头正盛,现在大有和react 平分秋色的势头,我们知道他是基于proxy 实现响应式的能力, 解决了vue2所遗留下来的一些问题,同时也正由于proxy的特性,也提高了 ...
- mac版本vscode窗口崩溃crashed
1.截图 出现时机 当安装依赖的时候大概率会出现,甚至安装一次依赖会出现几次 解决 具体原因未知 重新启动电脑以及退出软件都不能解决 去官网重新下载,重新安装问题解决
- 力扣181(MySQL)- 超过经理收入的员工（简单）
题目: 表:Employee 编写一个SQL查询来查找收入比经理高的员工. 以 任意顺序 返回结果表. 查询结果格式如下所示. 示例 1: 解题思路: 一.[子查询] 先通过子查询找到当前员工的经理 ...
- 力扣901(java&python)-股票价额跨度（中等）
题目: 编写一个 StockSpanner 类,它收集某些股票的每日报价,并返回该股票当日价格的跨度. 今天股票价格的跨度被定义为股票价格小于或等于今天价格的最大连续日数(从今天开始往回数,包括今天) ...
- 力扣605(java&python)-种花问题（简单）
题目: 假设有一个很长的花坛,一部分地块种植了花,另一部分却没有.可是,花不能种植在相邻的地块上,它们会争夺水源,两者都会死去. 给你一个整数数组 flowerbed 表示花坛,由若干 0 和 1 ...
- 力扣372(java)-超级次方（中等）
题目: 你的任务是计算 ab 对 1337 取模,a 是一个正整数,b 是一个非常大的正整数且会以数组形式给出. 示例 1: 输入:a = 2, b = [3]输出:8示例 2: 输入:a = 2, ...
- KubeVela：标准化的云原生平台构建引擎
简介: 本文由"GO 开源说"第三期 KubeVela 直播内容修改整理而成,视频内容较长,本文内容有所删减和重构. KubeVela 的背景 KubeVela 是一个基于 Go ...
- [Kali] Kali 信息收集
网络空间测绘. 网络空间测绘是2016年出现的一个概念,主要指用一些技术方法,来探测全球互联网空间上的节点分布情况和网络关系索引,构建全球互联网图谱的一种方法. nmap端口扫描. 子域名爆破. ...
- C# 从控制台创建 WinUI 3 应用
本文将告诉大家如何从控制台而不是 WinUI3 模版项目,从零一步步创建出 WinUI 3 应用 本文不是 WinUI 3 入门博客,本文将从比较基础层的方式创建出 WinUI 3 应用,适合于了解 ...
- 2018-2-13-win10-uwp-从StorageFile获取文件大小
title author date CreateTime categories win10 uwp 从StorageFile获取文件大小 lindexi 2018-2-13 17:23:3 +0800 ...