0

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

我创建了一个 JQuery 脚本，根据单击的链接将外部 div 向左或向右滑动（中间左侧 div 中的链接会将 div 向右滑动，将左侧的“隐藏”内容暴露出来，反之亦然，用于中间左侧 div 中的链接）。

我想要的是中间 div 的内容以视口为界，这样当外部 div 向左滑动时，中间左侧 div 的内容滑动不超过视口的右边缘，而当外部 div向左滑动，中间右侧 div 的内容不超过视口的左边缘。像这样的东西：

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

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

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

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

编辑：几乎解决了！这是新的小提琴。我的#left 和#midleft div 运行良好：我向click 事件添加了第二个动画，它改变了中间div 的左边距以适应滑动。然而，同样的技术必须适用于右侧：我必须在#mid_right click 事件中添加第三个动画来更改右侧 div 的边距，因为由于 div 的浮动特性，#mid_right div可以这么说，将#right div 推离屏幕并使其在下一个“行”上呈现。不幸的是，这产生了将我的#mid_right div 渲染到后面的副作用#right div，这样我就不能再点击链接了（我给了#left 和#right div 一个更暗的背景，这样你就可以很容易地看到发生了什么）。我尝试弄乱两个 div 的 z-index，但我认为因为它们是浮动的，所以 z-index 将没有效果。关于如何在右侧反映左侧效果的任何想法？

4

1 回答 1

0

这是一个小提琴，下面是代码。这只是检测 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);
       }
    }
});
于 2013-10-31T19:22:43.907 回答