当鼠标在“着陆内容”DIV中时,我想使X和Y轴上的背景图像稍微移动,它应该随着鼠标移动而移动.
它应该移动倒数.例如.鼠标向下移动,“着陆内容”图像向上移动.
它应该移动倒数.例如.鼠标向下移动,“着陆内容”图像向上移动.
<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/
$('#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');
});
这只是一个简单的例子,但你必须自己玩数字.
