DOM ------ 百度换肤
百度换肤:点击某个图片,设置该图片为背景图。
//css代码* {margin: 0;padding: 0;}body {background: url(../Picture/图片1.png) no-repeat center top;}li {list-style: none;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li {float:left;margin: 0 1px;cursor: pointer;}.baidu img {width: 100px;}//html代码<ul class="baidu"> <li><img src="../图片/图片1.png" alt=""></li><li><img src="../图片/图片2.png" alt=""></li><li><img src="../图片/图片3.png" alt=""></li><li><img src="../图片/图片4.png" alt=""></li></ul>//js代码//1.获取元素var imgs = document.querySelector('.baidu').querySelectorAll('img')//2.循环注册事件for(var i=0;i<imgs.length;i++){imgs[i].onclick = function() {// 把路径 this.src 给 bodydocument.body.style.backgroundImage = 'url(' + this.src + ')'}}
获取元素
:获取的是 ul标签
下的所有img
循环遍历
:遍历所有 img
, 利用数组的形式 , 绑定函数 , 点击显示该背景
注意
: 图片地址的拼接形式为 'url(' + this.src + ')'
寄语: 不积跬步,无以至千里;不积小流,无以成江海。
DOM ------ 百度换肤相关推荐
- 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- 排他思想 -- 百度换肤效果案例 以及 点击某按钮只是该按钮变色
排他思想 – 百度换肤效果案例 以及 点击某按钮只是该按钮变色 1.百度换肤 <!DOCTYPE html> <html lang="en"> <he ...
- 百度换肤JavaScript功能
百度换肤JavaScript功能 CSS-code: <style type="text/css">*{margin: 0;padding: 0;list-style: ...
- 百度换肤 querySelector方法 抖音播放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 浏览器换肤功能 项目案例 百度换肤
大家好 我是攻城狮JiRo, 今天给大家分享一下浏览器换肤的功能 需求:爱美之心,人皆有之,随着人们物质生活的提高,需求也不断提高,同样,作为开发者,我们当然要心系客户,那么今天的案例就是实现换肤功能 ...
- 仿造百度换肤功能的实现
换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的 ...
- 一个简单的百度换肤效果
一个简单的换肤效果 html和css部分 JavaScript部分 html和css部分 <style>* {margin: 0;padding: 0;}body {background: ...
- js实现百度换肤效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- Web API 排他操作案例 —— 百度换肤
学习来源:https://www.bilibili.com/video/BV1HJ41147DG 思路 给一组元素注册事件 给4个小图片利用循环注册点击事件 当我们点击了这个图片,让我们页面背 ...
最新文章
- 到「黄埔学院」去:打造AI首席架构师,第二期限量招募!
- mysql+dump+选项_mysqldump 备份常用选项以及备份脚本
- cygwin下安装软件
- 确认过眼神(*╹▽╹*),这就是大家想要的BCH
- python中time模块获取时间的使用
- Kibana查询ES显示hits.total.value最大值10000的解决方法
- 自定义DrawableTextView——实现TextView左上右下的点击监听
- 用JavaScript实现本地缓存
- html嵌入audio格式不支持,html5中audio支持音频格式的解决方法
- Ubuntu中让SSH自动重连
- 理解字节序(大小端)
- 安装netca_安装oracle 10g rac上的那些拦路虎
- 用openbabel将pdbqt文件转成pdb
- 电工模拟接线软件 app_电气接线方法以及线号管正确方向
- Spring核心组件分析
- 组合最优化——期中总结
- 计算机的游戏功能,游戏同步器功能介绍、作用讲解及使用方法
- 2022考研资料每日更新(2021.07.25)
- Ta-Lib用法介绍 !
- RMAN维护:RMAN中的交叉校验crosscheck
热门文章
- 缓冲电路/延时上电电路
- ClearCase的一些基本概念
- 电力系统通信与网络技术/智能变电站个人总结
- 电子海图与雷达图像的融合显示
- 网易邮箱支持手机收发邮件的服务器,[IT博览]网易163/126免费邮箱100%兼容iPhone/iPad邮件收发...
- 平行交通:虚实互动的智能交通管理与控制
- iis打不开php,php出现404找不到网页错误 iis配置问题解决
- FoxitReader3.0注册码和foxit pdf creator key foxit pdf editor v2.0 key
- 惠普传真服务器位置,HP打印机ip地址设置及添加
- 笔记本电脑网卡驱动损坏问题