Question

我有一个外部div和一些水平并排排列的内部div。内部div表示外部的不同部分（左，中左，中右和右）。覆盖外部div是一个“视口”或框架，在最终产品中，它将可见内容限制为框架内的内容。实际上，这个视口实际上是前面提到的“外部div”的父div，但我绝对定位它，从而将它从页面元素流中取出。

我创建了一个JQuery脚本，根据点击的链接将外部div滑动到左侧或右侧（中间左侧div中的链接将div滑动到右侧，暴露“隐藏”内容左边的，反之亦然，左边是div中的链接。

我想要的是中间div的内容被视口限制，这样当外部div向左滑动时，左中间div的内容不会滑动到视口的右边缘，当外部div向左滑动，中间右侧div的内容不会超出视口的左边缘。像这样：

               ____________________________________________________________
               | l                ||      ml | mr     ||                r |
               |                  ||         |        ||                  |
               |                  ||         |        ||                  |
               |                  ||         |        ||                  |
               |                  ||         |        ||                  |
               |                  ||         |        ||                  |
               |__________________||_________|________||__________________|

                                  ____________________________________________________________
                                  || l             ml || mr                                r |
                                  ||                  ||                                     |
                                  ||                  ||                                     |
                                  ||                  ||                                     |
                                  ||                  ||                                     |
                                  ||                  ||                                     |
                                  ||__________________||_____________________________________|

这是我到目前为止的一个方面：http://jsfiddle.net/xkjzx/2/ 我唯一没想到的是如何绑定中间div的内容。有人可以向我解释如何做到这一点吗？

编辑：我想保留我的小提琴完成的基础知识。但是，当隐藏视口的溢出时，我希望它看起来像#left div的内容滑入视图，而#mid_left div的内容滑过以为它腾出空间（而不是完全滑动）像现在一样离开屏幕），反之亦然。

编辑：几乎解决了！这是新的fiddle。我有#left和#midleft div工作得很好：我在click事件中添加了第二个动画，它改变了中间div的左边距以适应滑动。但是，必须针对右侧调整相同的技术：我必须在#mid_right click事件中添加第三个动画以更改右div的边距，因为由于浮动性质在div中，＃mid_right div正在将#right div推离屏幕并使其在下一个'line'上呈现，可以这么说。不幸的是，这会产生副作用，使我的#mid_right div 在后面 #right div，这样我就不能再点击链接把它带回来了（我给了#left和#right divs更深的背景，这样你就可以很容易地看到发生了什么）。我试着弄乱两个div的z-index，但我认为因为它们是浮动的，z-index将没有任何效果。关于如何反映右侧左侧效果的任何想法？

Answer 1

这里是fiddle，以下是代码。这只是检测div何时击中veiwport窗口并停止动画。

   $(document).ready(function() {
    var $viewport = $("#viewport");
    var slideAmount = $viewport.width() / 2;
    var viewportLeft = $viewport.offset().left;
    var viewportRight = $viewport.offset().left + $viewport.width();
    var $slider = $("#side_scroller");

    $('#mid_left a').click(function(event) 
    {
        event.preventDefault();
        collisionLoop = setInterval(collide, 1);
        $slider.animate({left: $(window).width()}); // animate to right side of window
    });

    $('#mid_right a').click(function(event) 
    {
        event.preventDefault(); 
        collisionLoop = setInterval(collide, 1);
        $slider.animate({left: -800}); 
    });

    function collide()
    {
      if($("#mid_left").offset().left + $("#mid_left").width() > viewportRight)
      {
        $slider.stop();
        var correction = $slider.position().left -(($("#mid_left").offset().left +$("#mid_left").width()) - viewportRight);
        $slider.css({left:correction});
        clearInterval(collisionLoop);
      }
      else if($("#mid_right").offset().left < viewportLeft)
      {
        $slider.stop();
        var correction = $slider.position().left +(viewportLeft - ($("#mid_right").offset().left));
        $slider.css({left:correction});
        clearInterval(collisionLoop);
       }
    }
});

当外部div向侧面滑动时绑定内部div

1 个答案: