用js让背景图片随着鼠标移动而移动
时间: 2023-06-07 12:07:46 浏览: 79
好的,以下是实现背景图片随着鼠标移动而移动的JS代码:
HTML部分:
```
<body>
<div id="background"></div>
</body>
```
CSS部分:
```
body {
overflow: hidden;
}
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('your_background_image_url_here');
background-size: cover;
background-position: center;
}
```
JS部分:
```
var background = document.getElementById('background');
document.addEventListener('mousemove', function(e) {
var x = e.clientX / window.innerWidth;
var y = e.clientY / window.innerHeight;
background.style.transform = 'translate(-' + x * 50 + 'px, -' + y * 50 + 'px)';
});
```
这段代码会给页面添加一个可视区域大小的固定背景,并且在鼠标移动时让背景图片随着鼠标的移动向相应方向平移。调整代码中的 translate 值可以改变背景移动的速度和方向。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)