用JavaScript与jQuery两种方法实现事件的委派

首先我们用JavaScript的方法

首先我们来布一下局给body标签一个id为body，里面我们放一个无序列表，我们再给ul标签一个id为hp，里面放四个li标签并在里面放img标签。
我们现在设置一下样式，首先给body标签设置一下，background-size:2000px 1000px;接下来我们设置ul标签，list-style: none;width: 900px;height: 100px;

margin: 100px auto 0;再来设置li标签的，width: 200px;height: 100px;float: left;最后我们设置img标签的，width: 200px;height: 100px;

接下来我们来写JavaScript

我们先写一个一面加载事件window.οnlοad=function(){}，然后我们获取一下ul标签 ，我们先声明一个变量hp，用document.getElementById("hp");来获取ul标签并且赋值给hp，我们在声明一个变量body，也用同一种方法来获取body标签并赋值给变量body，var body=document.getElementById("body");
下面这个方法叫做事件的委派，我们先来给ul标签绑定点击事件，并且传入一个参数，hp.οnclick=function(event){}，因为我们要考虑浏览器兼容性问题，所以我们在声明一个变量event，将这两种可能都考虑进去，var event=event||window.event;这句代码的意思是，如果能接受直接传进来的参数就无需变，如果不能的话我们就把他转化成window.event，这样就解决了浏览器兼容性的问题。
我们现在来设置一下body的背景图片，body.style.backgroundImage="url("+event.target.src+")";这个url里面的就是获取到我们点击li标签里的img的路径，这样我们就实现了图片切换背景的效果。
最后我们还要写上一句event.preventDefault();它的作用是阻止默认事件的发生。

效果如下：

接下来我们用jQuery来写一遍。

我们引入bootstrap框架，这样基本的样式我们就不用写了，我们再稍微再写一些样式。
首先我们放一个div，给他一个类为container，将框架引入。
再放一个无序列表，我们给ul标签一个类为list-group，我们再来给他设置一点样式width:500px; height:140px; margin:100px auto; flex-direction:row；。
再在里面放四个li标签，再给四个li标签一个类，list-group-item，在分别给这四个li标签一个类为a1，a2，a3，a4，我们再给li标签总的来设置样式，width: 100px; height: 100px; background-size:cover;，然后我们再分别给li标签设置背景图片，

.a1{ {background-image:url('../../Content/images/12.ico');

.a2 { background-image:url('../../Content/images/flower1.jpeg');}

.a3 { background-image: url('../../Content/images/flower2.jpg');}

.a4 {background-image: url('../../Content/images/picture.jpg');}

我们先写一个简写的ready事件，$(function () {})。
我们先获取一下所有的li标签，并且绑定点击事件$(".list-group>li").click(function () {})，然后声明一个变量ss，将getComputedStyle()的方法赋值给变量，并且这个方法里面传入一个this对象，这个this对象表示的是我们点击的li，然后我们再给body标签设置背景 图片，$("body").css("background-image", ss.backgroundImage);用变量点我们所需要的样式，这样就可以将样式设置给body了。

效果如下：

淘气的小丁-将图片切换成背景相关推荐

怎么把http图片改成背景图HTML,web前端：将图片设置成页面的背景-网页页面设置...
如题,字面上的意思,今天小编,就是来跟大家说一下,一个网页做一个图片背景! 将图片设置成背景,那么先找背景素材,这个背景素材可以到各大图片网站找! 那么为什么今天小编要讲这个呢? 在做一个网页中,如果 ...
html如何将图片弄成背景,如何用css把图片弄成背景
用css把图片弄成背景的方法:首先创建一个HTML示例文件:然后在body中添加一些p标签:最后使用css中的background属性将图片设置为背景即可. 本教程操作环境:Windows7系统.cs ...
js将base64图片处理成背景透明png
js将base64图片处理成背景透明png var canvas = document.getElementById('canvas')let imageSource=canvas.toDataURL ...
html点击圆点箭头分页,点击自动轮播图片下面的小圆点实现图片切换功能，并不是左右箭头那种切换...
我这个轮播图片没有左右箭头,只有下面的小圆点随着图片一起轮播,怎么实现onclick点击小圆点切换图片的功能这是我的js代码 var nextPcc = 1; function turnDispla ...
微信小程序-将图片裁剪成规定的尺寸
需求: 图片上传时,要求必须是720*720大小的图片,但是用camera拍出来的照片大小不固定,有的手机是720*720,有的就是1080*1080,还有480*480的解决办法: 将图片转换成c ...
Java将图片处理成背景透明的圆形图片
/** @author Michael Feng* @date 2017年9月4日*/import java.awt.AlphaComposite; import java.awt.Color; im ...
speedoffice（PPT）怎么将插入的图片设置成背景？
插入到PPT的图片,怎么设置成背景呢? 方法一:用speedoffice打开PPT图像后,在图片上任意位置右键,出现的选项卡里面选择"添加到布局"即可实现将图片设置为背景方法二: ...
微信小程序中base64转换成图片；uni-app小程序base64转图片；微信小程序base64文件转图片；微信小程序base64图片转图片
将微信小程序的图片转成base64 点击此链接看另一篇以下是将后端返回的base64转成图片: 方法1:使用微信小程序自带方法 //把base64转换成图片getBase64ImageUrl: (b ...
javascript 实现图片切换，考虑平稳退化与行为结构分离
最近在学习JavaScript DOM编程艺术,跟着学习把里面的一个demo 敲了,demo 是小玩意,但是在编程习惯上给了我很大的启发. 考虑"平稳退化":如果浏览器不支持或者禁 ...
c语言将一幅画转换为字符画,C#将图片转换成字符画
先看一下效果图在Main方法中调用(首先要添加程序集System.Drawing,然后引入命名空间System.Drawing) ConvertToChar(new Bitmap(@"D: ...

淘气的小丁-将图片切换成背景

用JavaScript与jQuery两种方法实现事件的委派

淘气的小丁-将图片切换成背景相关推荐

最新文章

热门文章