JS当鼠标经过网页左上角四张图片中任意一张时,body的背景图片变成经过的图片;当鼠标移开时,body的背景图片变成初始状态
时间: 2024-02-18 12:02:03 浏览: 30
可以使用JavaScript来实现鼠标经过网页左上角四张图片中任意一张时,body的背景图片变成经过的图片,鼠标移开时,body的背景图片变成初始状态的效果,具体操作如下:
1. 在HTML文件中,需要添加四个用于显示图片的元素,比如四个img标签或四个div标签:
```html
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
<div id="image4"></div>
```
2. 在CSS文件中定义这四个元素的样式,包括宽度、高度和背景图片等:
```css
#image1, #image2, #image3, #image4 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
cursor: pointer;
}
#image1 {
background-image: url('img/image1.jpg');
}
#image2 {
background-image: url('img/image2.jpg');
}
#image3 {
background-image: url('img/image3.jpg');
}
#image4 {
background-image: url('img/image4.jpg');
}
```
3. 在JavaScript中,获取这四个元素的引用,并定义一个变量用于存储原始的背景图片:
```js
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
var image3 = document.getElementById("image3");
var image4 = document.getElementById("image4");
var originalBackground = document.body.style.backgroundImage;
```
4. 定义一个函数,用来将当前鼠标经过的图片设置为body的背景图片:
```js
function setBackground(image) {
document.body.style.backgroundImage = image.style.backgroundImage;
}
```
5. 定义四个事件监听器,分别监听四个图片的鼠标经过和鼠标移开事件,并调用setBackground函数:
```js
image1.addEventListener("mouseover", function() {
setBackground(image1);
});
image2.addEventListener("mouseover", function() {
setBackground(image2);
});
image3.addEventListener("mouseover", function() {
setBackground(image3);
});
image4.addEventListener("mouseover", function() {
setBackground(image4);
});
image1.addEventListener("mouseout", function() {
document.body.style.backgroundImage = originalBackground;
});
image2.addEventListener("mouseout", function() {
document.body.style.backgroundImage = originalBackground;
});
image3.addEventListener("mouseout", function() {
document.body.style.backgroundImage = originalBackground;
});
image4.addEventListener("mouseout", function() {
document.body.style.backgroundImage = originalBackground;
});
```
这样就可以实现鼠标经过网页左上角四张图片中任意一张时,body的背景图片变成经过的图片,鼠标移开时,body的背景图片变成初始状态的效果了。