javascript - 使用 Javascript 在鼠标悬停时向各个方向平移背景图像

Question

我正在尝试为页面中的背景图像添加平移效果，图像相当大 1800 x 1067，所以基本上会比窗口大我只想在鼠标到达窗口末尾时向各个方向平移背景，我找到了一个进行平移的 Javascript 代码，但只是水平的，尝试使用它来启用垂直平移。没有工作。

这是 JSFiddle 上的代码:http://jsfiddle.net/v662t/

//HTML

<div id="pageBg">
</div>

//CSS

#pageBg {
    background: url(images/pageBg.jpg) no-repeat 0 0 scroll;
    background-size: cover;
    height: auto;
    left: 0;
    min-height: 768px;
    min-width: 1024px;
    overflow: hidden;
    position: fixed;   
    top: 0;
    width: 100%;
}

//Javascript

$(document).ready(function(){
   $('#pageBg').mousemove(function(e){
      var mousePosX = (e.pageX/$(window).width())*100;
      $('#pageBg').css('background-position-x', mousePosX +'%');
   }); 
});

Answer 1

删除 background-size: cover 并为 mousePosY 添加几行 javascript:

var mousePosY = (e.pageY/$(window).height())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');

在这里查看工作 fiddle :http://jsfiddle.net/georgedyer/XWnUA/2/