使用滚轮水平滚动创建展开DIV /画布JavaScript

好的 - 这是我正在尝试做的。我在网上寻找一个可以购买的酷时间线 - 允许缩小放大，在其上发布活动等等。然而，我发现的所有例子要么太昂贵，要么完全没用。使用滚轮水平滚动创建展开DIV /画布JavaScript

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

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

但是，更重要的是..

2）我需要我将展示在时间轴上，我去我的滚动，自动扩大面积。所以，如果我向下滚动，它会在右侧添加一个“等效”区域，并在左侧添加一个“等效”区域。所以我想创建一个iFrame（已经在使用这些），当你滚动时，它只是在左边或右边添加更多的“时间线”，加载从DB /事件列表中加载的任何东西，等等， ad infinitum，从而创建一个不断扩大的时间大小的块列表。

如果我能做到以上两件事，那么我就可以了 - 其余的（加载/定位）我可以弄清楚 - 只是这两件事让我无法想象并找到答案。

来源

2013-02-28 Irresistance

基本上你需要一个水平的无限滚动脚本。 – 2013-02-28 16:17:30

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

就拿这个插件我写道：

$.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必须比身体宽（例如3000px）。

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

您的内容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-28 16:26:23

使用滚轮水平滚动创建展开DIV /画布JavaScript

回答

相关问题