2

DZSlidesがピクセル寸法を使用し、それらをビューポート サイズにスケーリングする方法が気に入っています。これは、プレゼンテーションに優れた予測可能性を提供するためです (ただし、通常の Web サイトでは使用したくありません)。

ただし、スケーリングが正確にどのように機能するかを理解できないようです-コードを再作成しようとする私自身の試みには、高さ全体を占めていないか、奇妙な垂直オフセットを示しているかのいずれかで、いくつかの厄介な癖があります:

http://jsfiddle.net/vYA8L/

私の例に欠けているものと、DZSlidesが実際にどのように機能するかについての簡潔な説明に感謝します.

4

1 に答える 1

5

DZSlides は 800x600 に設定bodyされ、ウィンドウの中央に配置されます(コメントは私が追加しました):

body {
    width: 800px; height: 600px;
    margin-left: -400px; margin-top: -300px;  /* these two lines center */
    position: absolute; top: 50%; left: 50%;  /* body in the window     */
    ...
}

各スライドにはwidth: 100%とheight: 100%があります。つまり、スライドは から幅と高さを継承しbodyます。

JavaScript コードは実際bodyにはウィンドウに合わせてスケーリングされるため、各スライドもウィンドウに合わせてスケーリングされます。

これらのスタイルで更新された jsFiddle は正しくスケーリングされます。

の代わりにスライド要素をスケーリングするbody場合は、同じスタイル/計算をスライドに適用できます ( demo )。

于 2012-06-20T11:17:15.273 に答える