移动鼠标上的背景图像（单视​​差） [英] Move the background image on mouse over (Single Parallax)

问题描述

当鼠标在着陆内容DIV中时，我想使背景图像在X和Y轴上稍微移动，它应该随鼠标的移动而移动。
它应该移动反。例如。鼠标向下移动，着陆内容图像向上移动。

I would like to make the background image move slightly on the X and Y axis when the mouse is in the "landing-content" DIV, it should move with the movement of the mouse. it should move inverse. EG. Mouse move down, "landing-content" image moves up.

HTML

<div id="landing-content">
<section class="slider"> 
<img src="http://i.imgur.com/fVWomWz.png"></img>
</section>
</div>

CSS

#landing-content {
overflow: hidden;
background-image: url(http://i.imgur.com/F2FPRMd.jpg);
width: 100%;
background-size: cover;
background-repeat: no-repeat;
max-height: 500px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;
}

.slider {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 1002px;
}

.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}

JSFiddle
http://jsfiddle.net/uMk7m/

任何帮助被逮捕。

推荐答案

您可以使用mousemove事件，如这个小提琴所示。 http://jsfiddle.net/X7UwG/

You could use the mousemove event, as shown in this fiddle. http://jsfiddle.net/X7UwG/

$('#landing-content').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 6);
    var amountMovedY = (e.pageY * -1 / 6);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});

这只是一个简单的例子，你必须自己玩数字。 ;）

It's just a quick example though, you'll have to play with the numbers yourself. ;)

这篇关于移动鼠标上的背景图像（单视​​差）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！