0

好的 - 这就是我想要做的。我在网上寻找可以购买的很酷的时间线——允许放大缩小、在上面发布事件等等。但是，我发现的所有示例要么太昂贵，要么完全没用。

所以，我决定创建自己的，但有两个元素我遇到了麻烦。

1）将滚轮滚动转换为左右滚动（所以不是上下滚动）。我似乎找不到一种简单快捷的方法来做到这一点。

但是，更重要的是..

2) 我需要在滚动时自动扩展显示时间线的区域。因此，如果我向下滚动，它将在右侧添加一个“等效”区域，然后在左侧添加一个“等效”区域。所以我想制作一个iFrame（已经使用这些），当你滚动它时，它只会在左侧或右侧添加更多“时间线”，从数据库/事件列表中加载它需要加载的内容，等等， ad infinitum，从而创建了一个不断扩展的时间大小的块列表。

如果我能做到以上两件事，那么我就做好了——剩下的（加载/定位）我可以弄清楚——只是这两件事正在逃避我的想象力和找到答案的能力。

4

1 回答 1

0

基本上你需要一个水平无限滚动脚本。

拿我写的这个插件：

 $.fn.hScroll = function( options )
 {
  function scroll( obj, e )
  {
    var evt = e.originalEvent;
    var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;

    if( direction > 0)
    {
        direction =  $(obj).scrollLeft() - 120;
    }
    else
    {
        direction = $(obj).scrollLeft() + 120;
    }

    $(obj).scrollLeft( direction );

    e.preventDefault();
  }

  $(this).width( $(this).find('div').width() );

  $(this).bind('DOMMouseScroll mousewheel', function( e )
  {
      scroll( this, e );
  });
}

初始化它：

  $('body').hScroll();

使您的网站成为可水平滚动的网站。

您的内容 div 必须比您的 body 宽（例如 3000 像素）。

至于无限滚动效果，你几乎必须自己做，因为我不知道你会输入什么样的数据。但我会解释的。

内容 div 中的子元素必须向左浮动。（每个新附加的 div 都不会换行）。

设置一个间隔来检查用户的 scrollLeft 位置是否接近内容的末尾（就像 pinterest 和类似网站一样）。

    function loadNewData(){ /* Your search for data and update here. */ }
    setInterval('loadNewData', 500);

使用 AJAX 根据您最后的数据搜索新数据。当您获得新数据时，将其附加到您的内容 div 中（在一个向左浮动的 div 中，如我之前所写），并将其标记为您的最后一项。

也许你可以使用你的 ID 来标记它的 div 上的最后一项。

   <div data-id="467" class="item"> // your data here  </div>

你可以用

   $('.item:last').attr('data-id');

用 jQuery。

于 2013-02-28T16:26:23.483 回答