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 +'%');

在这里查看工作小提琴：http://jsfiddle.net/georgedyer/XWnUA/2/

Answer 2

我正在回答关于此处边缘平移的评论，以包含更好的格式化。

这取决于你想要在边缘平移的完全的工作方式。只有当鼠标在边缘上移动时，或者即使鼠标不动但是悬停在边缘上时，图像是否会移动？

在第一种情况下：您可以使用相同的小提琴代码，只需检查mousePosX或mousePosY是否＆lt; 10或＆gt; 90（或您想要定义为边的任何百分比）。如果是这样，那么不是将图像移动到窗口的百分比，而是将其移动到边缘的百分比。

由于这可能会有点过于敏感，所以你可以选择继续使用悬停，在这种情况下你会使用mouseEnter和mouseLeave事件，而只是开始mouseEnter上的间隔（使用var interval = setInterval(moveImage,250);）将背景图像移动一个像素，然后清除clearInterval(interval);上的间隔（mouseLeave）。

我会留给你自己编辑the fiddle，看看你能不能按照自己的意愿运作。

使用Javascript在鼠标悬停时在所有方向上平移背景图像

2 个答案: