Question

我想在我的网页中有一个背景图片，当鼠标悬停在它上面时，背景图片会像鼠标一样移动鼠标移动：

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

我有这个HTML代码：

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

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

Answer 1

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

这很容易使用，但达到相同的效果可能需要一些试验和错误的东西..但这是值得的！

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

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

Answer 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/

css背景图像运动与鼠标悬停

2 个答案: