鼠标悬停的CSS背景图像移动答案

【问题标题】：css background image movement with mouse hover鼠标悬停的CSS背景图像移动
【发布时间】：2018-07-07 04:58:06
【问题描述】：

我想在我的网页中有一个元素，它有一个背景图像，当鼠标悬停在它上面时，背景图像会随着鼠标移动而移动，就像这个网站一样：

http://www.kennedyandoswald.com/#!/premiere-screen

我有这个 HTML 代码：

<section id="home" data-speed="3" data-type="background"></section>

我可以用'data-speed="3"'控制背景图像滚动的速度，但我想知道是否有任何类似于'data-speed'的代码可以使用鼠标移动来移动背景图像而不是滚动。

【问题讨论】：

那么问题是什么？
这是一个问题还是一个请求？
你已经标记了它，它被称为视差效应，现在在网上搜索例子。我们不是来给你写代码的

标签： javascript jquery html css

【解决方案1】：

有很多 JS 库可以帮助你实现这个效果。我个人经常使用这个：http://wagerfield.github.io/parallax/

这很容易使用，但要达到相同的效果可能需要一些反复试验。但这是值得的！

另一个不像上面那么复杂但功能强大的是：http://stephband.info/jparallax/

您可以尝试两种方法，看看哪一种最适合您使用。

【讨论】：

【解决方案2】：

如果您想自己滚动，只需将 jQuery mousemove 函数与 CSS3 转换结合使用即可。类似这样的东西：

$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
console.log( "<div>" + msg + "</div>" );
$("#movingobject").css('transform', 'translate(' + event.pageY /4 + 'px,' + -event.pageX /4+ 'px)');
});

我制作了一个 jsfiddle poc，您可以在其中看到它的运行情况。当然，您必须根据您的特定需求调整运动功能。

http://jsfiddle.net/ZmZhw/

【讨论】：