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不 ...
随机推荐
- signalr 应用于微信小程序（一）
前言 在2017年基于signalr 和微信小程序 写的脚本. 正文 先安装signalr: 1.安装singalr,用nutget就行,用这个包管理就行. 2.使用singalr 3.根据singa ...
- coco2017 Dataset EDA
Github仓库:gy-7/coco_EDA (github.com) 对coco数据集的分析,近期忙着写论文,空余时间很少能写博文了. EDA的代码放在结尾了,Github仓库里也有.仓库里还有其他 ...
- javascript现代编程系列教程之X——javascript人工智能
JavaScript 在人工智能(AI)领域的应用主要体现在以下几个方面: 浏览器端的机器学习:TensorFlow.js 是一个在浏览器中运行的 JavaScript 机器学习库,它允许开发者训练和 ...
- 一个好的网站logo设计长这样
简介:一个好的网站logo,不仅让用户一眼知道网站品牌传递的信息,还能提高网站专业度和丰富度,增加SEO搜索排名.今天分享下如何设计一款实用的网站logo.阿里云智能logo设计,在线免费体验log ...
- 5月25日，阿里云开源 PolarDB-X 将迎来重磅升级发布
简介:2022年5月25日,阿里云开源 PolarDB-X 将升级发布新版本!PolarDB-X 从 2009 年开始服务于阿里巴巴电商核心系统, 2015 年开始对外提供商业化服务,并于 2021 ...
- 新型DDoS来袭 | 基于STUN协议的DDoS反射攻击分析
简介: 作为新型反射类型,目前仍存绕过防御可能性. 阿里云安全近期发现利用STUN(Session Traversal Utilities for NAT,NAT会话穿越应用程序)服务发起的DDoS反 ...
- Hologres揭秘：优化COPY，批量导入性能提升5倍+
简介: 揭秘Hologres优化COPY的技术原理,实现批量导入性能提升5倍+ Hologres(中文名交互式分析)是阿里云自研的一站式实时数仓,这个云原生系统融合了实时服务和分析大数据的场景,全面兼 ...
- 基于 MySQL + Tablestore 分层存储架构的大规模订单系统实践-架构篇
简介: 本文简要介绍了基于 MySQL 结合 Tablestore 的大规模订单系统方案.这种方案支持大数据存储.高性能数据检索.SQL搜索.实时与全量数据分析,且部署简单.运维成本低. 作者 ...
- Nacos 开源、自研、商业化三位一体战略解读
简介: Nacos作为整个阿里云原生三位战略中的核心组成部分,我们在2018年以Configserver/VIPServer/Diamond为基础通过Nacos开源输出阿里十年沉淀的注册中心和配置中心 ...
- [FAQ] WebStorm/PHPStorm：设置 HTML/JavaScript/PHP 注释缩进行为，代码片段
[注释行为] Preferences -> Code Style 选择语言后,找到 Wrapping and Braces, 取消 Comment at first column. 如果是HTM ...