JavaScript利用事件委派完成背景图片的切换

于 2022-04-28 15:39:39 发布
阅读量1.2k 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/torino999/article/details/124475483
版权

第一步创建一个div标签放入要切换的三张背景图片

 第二步把body的背景图片设置

 第三步创建一个script标签写JS代码，给div绑定点击事件

第四步获取触发事件的对象，找到标签名为IMG（事件对象的nodeName要大写）

 

第五步获取标签属性的值，设置到body标签的背景图片上

完整代码

小结：
先给div设置点击事件，再利用触发事件对象找到触发的对象名为IMG的
获取它的图片路径src然后设置在body的背景图片上，完成切换背景图片

三思而后行.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript jQuery基本语法及使用（选择器、动画、属性、事件）
雪月的博客
03-15 1164
目录jQuery基本使用入口函数顶级对象`$`jQuery对象和DOM对象常用API选择器基础选择器层级选择器隐式迭代筛选选择器筛选方法排他思想的jQuery实现链式编程jQuery样式修改操作css方法设置类样式方法jQuery动画显示和隐藏滑动效果 slide鼠标经过、离开 hover动画队列停止排队淡入淡出效果 fade自定义动画 animate属性操作操作元素固有属性 prop()操作元素自定义属性 attr()数据缓存 data()内容文本操作普通元素内容html()普通元素文本内容html()表
Javascript笔记大全02
qwq_666的博客
08-03 397
DOM 简介 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 DOM树 窗口加载事件 // 为window绑定一个onload事件 window.onload = function() {} 或者 window.addEventListener('load',function() {}); // 该事件对应的响应函数将会在页面加载完成之后执行 // 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
js 转盘(切换背景图片)
04-11
NULL 博文链接：https://dongbiying.iteye.com/blog/1680266
JavaScript点击背景图片切换
weixin_67107650的博客
03-28 5286
本文献这次讲的是JavaScript背景图片切换，这次案列会用一个事件委派属性。 1.首先可以先给主页界面放一张图片，让打开网页就显示到一张图片出来，这里我放的是下面第三张图片。 2.然后把html的div图片框架打出来，一个div标签里面包裹了四个img标签，给div一个id，下面获取id的时候需要。 3.再给四个img标签打一下样式，能把效果显示的好看一点。 4.开始获取前面的id，先写一个window.onload页面加载事件，然后里面获取一下...
纯js实现背景图片切换
weixin_34007906的博客
11-14 399
现在纯粹用js的人越来越少了，更多的人喜欢jquery，可使我还是喜欢javascript，下面给出一个用javascript写的背景切换的小例子，各位大虾不要骂，只是写给自己看的，也供js事件的产考依据。 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...
利用JS切换背景图
weixin_33694172的博客
04-18 1490
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript:点击小图片切换背景图片
果冻
05-05 1702
屏幕部分图片，点击中间的小图片，会变换背景图片 html布局代码： <ul class="box"> <li><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.jpg" alt=""&g.
javascript学习笔记
li520_fei的博客
03-14 392
【前端总路线学习笔记】 文章目录javascript一、简介5.JS的特点二、基础语法1. Helloword-编写位置-基本语法-字面量和变量-标识符2.数据类型-基本数据类型(String-Number-Boolean-Null-Undefined)-类型转换3.运算符(算数运算符-一元运算符-逻辑运算符-赋值运算符-关系运算符-相等运算符-三元运算符)4.html页面和 js使用 Unicode编码5.语句 代码块6. 流程控制语句(if-else if-else ;switch-case; whil
JavaScript — DOM
gxll499294075的博客
03-19 381
一、Web APIs 简介 1.1 Web APIs 和 JS基础关联性 1.1.1 JS组成 1.1.2 JS基础阶段以及 Web APIs阶段 JS基础阶段 学习的是ECMAScript 标准规定的基本语法 掌握js基本语法 只学习语法，做不了常用的网页交互效果 目的是为了JS后面的课程打基础、做铺垫 Web APIs 阶段 Web APIs 是 w3c 组织的标准 Web APIs 主要学习 DOM 和 BOM Web APIs 是 JS 所独有的部分 主要学习页面的交互功
Js实现背景图片切换
wuliao193728645的博客
04-10 6692
实现目标： 点击页面中间的小图片，页面的背景就会变成相应的图片样式 思路 点击图片，获取到对应的图片的li元素 因为图片的名字是从1开始顺序命名的，所以可以通过获取的li元素的索引号来改变背景图片的地址名 将地址名改到body标签的backgroundImage属性中 实现代码 html代码 Css代码 Js代码 ...
JavaScript实现更换背景图片
12-13
本文实例为大家分享了JavaScript实现更换背景图片的具体代码，供大家参考，具体内容如下 主要通过Js控制行内样式，达到更换背景图片的目的 效果：       代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>更换背景</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: url(./images/01.jpg) no-repeat; background-size: 60
js实现点击图片改变页面背景图的方法
10-24
主要介绍了js实现点击图片改变页面背景图的方法,实例分析了javascript操作css与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript实现点击图片换背景
01-21
JS制作网页–点击图片换背景，供大家参考，具体内容如下 网页中有四个图片，点击不同的图片，更换相对应的背景。 <!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>背景</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } li { list-style:
js更换背景图
Protagonist
06-21 1254
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
用事件委派来完成图片的切换
weixin_55491533的博客
05-16 181
一：用事件委派来完成图片的切换 1.事件的委派： 将事件统一绑定到元素共有的祖先元素,当后代元素的事件触发时,会一直冒泡到祖先元素 从而通过祖先元素的响应函数来处理事件 事件的委派是利用了冒泡,通过委派可以减少绑定的次数,提高程序的性能 HTML部分代码 css部分代码 Js部分代码 1定义一个页面加载事件 获取图片的上一级元素的ID 绑定一个单击响应函数 还要考虑到事件兼容性的问题 获取event.target对象中的src属性，这里的值为绝对路径 获取标签的值...
js设置随机切换背景图片
weixin_34393428的博客
11-10 672
<script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_d...
前端百度换肤案例
weixin_46002223的博客
08-28 579
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .
js切换背景
qq_62336903的博客
04-05 382
我们通过获取所有的img元素，在给每个img元素添加一个点击事件，最后通过点击img标签将 img标签的src送给body的背景。 js部分 var img = document.querySelectorAll('img'); for (var i = 0; i < img.length; i++) { img[i].onclick = function() { document.body.style.backgro
JavaScript事件处理：按键与鼠标交互实现背景色切换
在练习中，`dblclick`事件用于实现双击鼠标时页面背景颜色的循环切换。 6.5 页面事件 页面事件如`load`（页面完全加载）和`unload`（页面卸载）在上述例子中已经有所展示。还有其他事件，如`beforeunload`（页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值