Dom——仿百度换肤-白红宇的个人博客

Dom——仿百度换肤

发布日期：2021-06-29 11:16:45 浏览次数：3 分类：技术文章

本文共 247 字，大约阅读时间需要 1 分钟。

仿百度换肤

效果

效果如上图所示，总共有几张图片可供选择，当点击其他图片时，页面的背景图片也会相应的切换。

核心思路

点击图片可切换页面的背景，则事件源为整个body，和每个小图片img；事件类型为点击小图片onclick。但是给每个小图片设置一个事件源和事件类型又过于繁琐，因此可以利用for进行遍历，第i个图片被点击时则返回图片路径给body。

HTML与CSS

JavaScript部分

最终效果

可实现自由切换

转载地址：https://blog.csdn.net/zx2014567296/article/details/117791820 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：Dom——显示隐藏

下一篇：Dom——仿淘宝关闭二维码

发表评论

最新留言

第一次来，支持一个

[***.219.124.196]2024年04月24日 21时28分01秒

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

推荐文章

用vcgencmd获取树莓派硬件状态数据 2019-04-29

IIS 多域名多张证书配置 2019-04-29

树莓派LINUX 截屏 2019-04-29

树莓派Raspberry Pi的嵌入式QT平台 2019-04-29

apache https 2019-04-29

Debian Jessie安装支持HTML5音视频的Chromium浏览器听百度音乐 2019-04-29

nanopi2 启动信息 2019-04-29

POS打印机驱动大全 2019-04-29

phpstudy https 2019-04-29

centos apache 最新版HTTPS配置 2019-04-29

树莓派添加中文语音合成功能 2019-04-29

kangle https设置 2019-04-29

在树莓派上安装GUI的FreeRadius(Raspberry PI based FreeRadius Server with GUI) 2019-04-29

Linux下EasyPanel版本安装及升级 2019-04-29

raspberry pi(树莓派) + easycap d60 视频采集 2019-04-29

WebRTC 2019-04-29

rfc5766-turn-server NAT 2019-04-29

webrtc详细教程 2019-04-29

Android IOS WebRTC 音视频开发总结 2019-04-29

报表图表样式 2019-04-29

白红宇的个人博客 - 记录点点滴滴的事 - 您是第 309795126 位访客

访问时间: 2024-05-01 23:23:13 访问IP: 18.226.251.68 Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1 手机版