0

わかりました-これが私がやろうとしていることです。購入できるクールなタイムラインをオンラインで探していました。ズームイン、ズームアウト、イベントの投稿などが可能です。ただし、私が見つけたすべての例は、高すぎるか、まったく役に立たないかのいずれかです。

というわけで、自作することにしたのですが、2点困っているところがあります。

1）ホイールスクロールを左右スクロールに変換します（上下ではありません）。これを行う簡単で迅速な方法が見つからないようです。

しかし、もっと重要なことは..

2) タイムラインを表示する領域をスクロールすると自動的に拡大する必要があります。したがって、下にスクロールすると、右側に「同等の」領域が追加され、左側に下に追加されます。だから私はiFrame（すでにこれらを使用しています）を作成することを考えていました。スクロールすると、左側または右側に「タイムライン」が追加され、DB /イベントのリストからロードする必要があるものはロードされます。このようにして、時間サイズのブロックのリストが拡大し続けます。

上記の 2 つのことを実行できれば、準備は完了です。残りの部分 (ロード/ポジショニング) は理解できます。

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 は、本文よりも広くする必要があります (例: 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-28T16:26:23.483 に答える