-1

ここのような「スライダーサイト」機能をどのように達成できるか知っている人はいますかhttp://dawidtomczyk.pl/

ナビゲーションホームなどをクリックしてください。

そのサイトで使用された各プラグインを確認したところ、「サイト スライド」効果に関連するプラグインはありませんでした。ソースコードを見た後、彼は $(window).scroll() を含むカスタム関数でそれを達成したと思いますが、その「効果」を達成する方法を本当に理解していませんでした。

また、できる限り多くのクロスブラウザーを実現することを好むことを付け加えたいと思います。IE8+、および新しいもの。

それはできますか？

4

1 に答える 1

0

あなたが説明したことを行うためのアイデアは次のとおりです。

1. レイアウト

を。幅が 100% で、overflow-x:hidden のコンテナー div を作成します。

b. width (pages * 100) % (pages は表示するページ数) と position:relative (後でアニメーション化するため) で子 div を作成します。

c. 各ページは、前の div (b. で説明したもの) 内に含まれる div です。これらの div は互いに隣接している必要があるため、display: inline-block; を使用します。それらを (100 / ページ) % の幅に設定します。

2 ページだけを表示する場合、構造は次のようになります。

   <div id="slider">
       <div id="pages">
           <div>
               <!-- Content of page 1 -->
           </div><!--
           --><div>
               <!-- Content of page 2 -->
           </div>
       </div>
   </div>

そしてCSS：

   #slider {
       overflow-x: hidden;
       width: 100%;
   }

   #pages {
       position: relative;
       width: 200%;
   }

   #pages > div {
         display: inline-block;
         width: 50%;
   }

「グラフィック」な視覚化 (すべての div が重なっている必要があるため、あまり正確ではありませんが、レイアウトの視覚化に役立つことを願っています)。

+-SLIDER----------------------------+
|+---PAGES--------------------------------------------------------------+
||+---------------------------------++---------------------------------+|                                 
|||                                 ||                                 ||
|||            PAGE 1               ||             PAGE 2              ||
|||                                 ||                                 ||
|||                                 ||                                 ||
|||                                 ||                                 ||
|||                                 ||                                 ||
||+---------------------------------++---------------------------------+|
|+----------------------------------------------------------------------+
+------------------------------------+

プロパティ overflow-x が「hidden」に設定されているため、ページ 2 は表示されません。

2.アニメーション

アニメーションは、スライダー div の現在の幅を考慮して、ページ div の「左」プロパティをアニメーション化することで実行できます。

あなたが説明した効果を達成する方法のアイデアを概説しようとしました. 実際のコードが必要な場合は、私に尋ねてください。お役に立てば幸いです。

于 2013-02-13T20:20:52.597 に答える