2

我有一个我今天一直在尝试修复的特殊错误——仍然没有运气。如果你看下面的例子，

http://vitaliyg.com/alpha/hire/

这就是发生的事情。全角背景图像加载到正确的位置，沿 y 轴居中。然后，当我们将鼠标悬停在图像上时，整个图像会跳到中间，并慢慢调整自己回到正常所需的位置。

这是什么原因造成的left: 50%; margin-left: -960px;。这使我们能够正确地将图像居中。如果我们没有这个 CSS，悬停就不会跳跃，但图像会加载并锚定在浏览器的左上角。

在上面的链接中，红框是内容 div。蓝色框是一些将与background-image.

这是我想要实现的目标：

  1. 使background-image显示居中。
  2. 当用户将鼠标悬停在 上时background-image，它不会跳转到页面中间。
  3. 最后，减小用户能够在 x 轴上“视差”的宽度。现在的情况是，如果有足够的耐心，用户可以从一侧看到图像。我希望视差非常微妙。

另外，我正在使用 jParallax，在这里找到：
http ://stephband.info/jparallax/

谢谢您的帮助！

4

1 回答 1

3

一旦你通过 CSS 为背景图像设置了位置，jQuery Parallax 插件似乎会改变这些设置。然后解决方案是在 jQuery Parallax 处理完该视差层之后应用这些设置。

首先，从您的班级中删除margin-leftand 。left.parallax-layer#background

.parallax-layer#background {
  background-image: url('../images/bg.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 1920px;
  height: 620px;
}

理想情况下，使用相同的方法将蓝色框居中（除非您希望它部分离开屏幕）。我还根据您的 HTML 删除了非必要的 CSS。

.parallax-layer#tagline {
  background-color: blue;
  width: 400px;
  height: 400px;
}

最后，添加从背景和标语选择器中删除的 CSS 规则，以便在 jQuery Parallax 操作这些项目后应用它们。

jQuery(document).ready(function(){
    jQuery('#parallax .parallax-layer')
    .parallax({
        mouseport: jQuery('body')
    });
  jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
  jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});

当鼠标进入视口时，您将不再看到背景图像左侧的大白色部分（主体背景颜色）。

这个jQuery Parallax插件按设计将所有内容对齐顶部/左侧。如果鼠标从蓝色框的右侧进入视口，则该框将正确动画到该位置。

但是，如果鼠标从蓝色框的左侧进入，该框将“跳转”到光标位置。您可能会考虑删除上面的最后一个 jQuery 行，以便在浏览器加载时蓝色框位于顶部/左侧，或者使用较低的百分比值，例如25%.

对于那些登陆这个问题/答案并希望使用一些真正的标记的人，我已经设置了两个 jsFiddles。一个 jsFiddle 重复了这个问题，另一个有如上所示的解决方案。

原始问题 - jsFiddle 已
修复应用 - jsFiddle

两个 jsFiddles 都处于全屏模式，因此可以看到视差效果。

查看原始问题的说明：
1.启动上面的原始问题 jsFiddle 链接。
2.按下jsFiddle播放按钮，注意不要进入视口。如果蓝色框以任何方式移动...您已进入视口，请再次按下播放按钮。
3.从视口的顶部/左侧进入，您将看到问题...... HTML Body（白色）被视为背景图像重新调整自身。
4.随时按播放按钮重置网页。

要查看已修复的应用程序，请启动上面的链接或在浏览器地址栏中修改 URL，以便您看到该 jsFiddle 的修订版 1。（即，http://jsfiddle.net/UG4Sq/1/embedded/result/）

蓝色框通过文本指示您查看的 jsFiddle。干杯!

于 2012-12-07T08:43:13.870 回答