背景图片根据鼠标移动偏移
时间: 2023-11-03 11:06:24 浏览: 90
很好,你要求背景图片根据鼠标移动偏移。这可以通过CSS和JavaScript实现。具体实现方式如下:
1. HTML代码中需要一个div元素作为背景,样式如下:
<div class="bg"></div>
2. CSS将该div元素设置为全屏幕大小,并设置背景图片:
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('your-background-image-url');
background-size: cover;
background-position: center;
}
3. JavaScript监听鼠标移动事件,计算鼠标移动距离并用该距离修改背景图片的背景位置:
var bg = document.getElementsByClassName('bg')[0];
window.addEventListener('mousemove', function(e) {
var moveX = (e.pageX * -1 / 20) + 50;
var moveY = (e.pageY * -1 / 20) + 50;
bg.style.backgroundPosition = moveX + '% ' + moveY + '%';
});
其中,moveX和moveY分别为横向和纵向的移动距离,这里将其设为鼠标移动距离的20分之一,可以根据实际效果进行适当调整。
希望这个代码示例能够为你提供帮助!