使用滾輪水平滾動創建展開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

回答

相關問題