2

我正在尝试为页面中的背景图像添加平移效果，图像非常大 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 +'%');
   }); 
});
4

2 回答 2

1

为 mousePosY删除background-size: cover并添加一些 javascript 行：

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

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

于 2013-01-23T20:58:10.993 回答
1

我在这里回答关于在边缘平移以包括更好的格式的评论。

这取决于您希望在边缘平移的确切程度。仅当鼠标在边缘上移动时，图像才会移动，或者即使鼠标静止但悬停在边缘上时，图像也会移动吗？

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

由于这可能最终有点过于敏感，因此您可以选择仅在悬停上移动，在这种情况下，您将使用mouseEnterand事件，然后在(using )mouseLeave上开始一个间隔，将背景图像移动一个像素，然后清除那个区间 ( ) on 。mouseEntervar interval = setInterval(moveImage,250);clearInterval(interval);mouseLeave

我会把它留给你自己编辑小提琴，看看你是否可以让它按你想要的方式工作。

于 2013-01-24T14:35:27.803 回答