0

我仍在为基于 3 个级别的客户开发视差网站。我遇到了一个问题，使我无法添加到第三个顶层。

该站点本身具有以一种速度滚动的全屏背景。它是一个非常长的垂直图像，滚动缓慢。最重要的是以标准速度滚动的内容。

第三层是简单的位置：位于某些内容区域之上的绝对图形。基本上是浮动图像。

我遇到的问题是，对于我尝试过的大多数视差插件，浮动的第三级图像没有任何东西可以消失。这意味着虽然我可以在更改后立即根据屏幕尺寸设置它们，但我看到它消失在一条看不见的线后面。

我可以使用任何插件或方法来阻止这种情况发生吗？所以本质上我想设置图像所在的位置，如果视差效果不起作用，并且它围绕该点产生视差。

4

3 回答 3

0

如果您可以让它在屏幕尺寸上工作，只需使用 jquery 根据屏幕尺寸获取和设置对象位置，

jQuery(document).ready(function($) {

    jQuery.event.add(window, "load", resizeFrame);
    jQuery.event.add(window, "resize", resizeFrame);

    function resizeFrame() 

    {
        var h = $(window).height();

        $('#foo1') .css({'top': (h-30)});
        $('#foo2') .css({'left': (h-67)});

    }
});

例如。

于 2013-01-10T11:57:41.443 回答
0

您需要基于纯 jquery/javascript 编写自己的代码。

插件是为简单的操作而创建的。需要根据当前创建 JS 应用$(document).scrollTop()

主要代码模式将是：

$(window).on('scroll resize',function(){
  var Top = $(document).scrollTop();
  if(Top < 200){ /*slide1 actions*/ }
  else if(Top >= 200 && Top < 400){ /*slide2 actions*/ }
  else if(Top >= 400 && Top < 600){ /*slide3 actions*/ }
  // etc
});

也使用此技巧https://stackoverflow.com/a/11709360/1136141以获得更高的性能

于 2012-07-29T13:18:51.677 回答
0

我遇到的问题是，对于我尝试过的大多数视差插件，浮动的第三级图像没有任何东西可以消失。

您确实希望第三级图像在某些点消失的问题吗？我有一个类似的问题，有一个长的单一滚动背景，然后在上面构建了一个没有背景的 div 页面，然后将图像放在页面上下的各种 div 中，并将 divoverflow设置为hidden. 为更容易放置第三级图像而设计，也意味着您可以将它们隐藏在特定点。

于 2012-08-29T10:28:03.160 回答