0

私は jquery スロット マシン プラグインを使用しており、少し拡張したいと考えていますが、それがどのように機能しているかを理解するのに苦労しています。

https://github.com/matthewlein/jQuery-jSlots

現在、デモでは、一度に 1 つだけ<li>が表示されるように使用されています。<li>それを拡張して、上の半分と下の半分が見えるようにしたいと思います<li>。実際のスロット マシンのようなもので、可視領域から何が来て何が離れているかを確認できます。

だから、私はコンテナを垂直に拡張しまし<li>た<li>. リストに 5+ を追加しても、まだ発生<li>します。.slot のサイズを大きくしても、コンテナーの高さを短くして制約する場合にも発生します。

このフィドルに気付くでしょう。再生をクリックすると、下部に白い背景が表示されます。彼らが減速するにつれて、それは悪化します。停止すると、下部が欠落して停止することがあります...フィドルリソースにjslots.jsファイルを添付しました

http://jsfiddle.net/livinzlife/3bVe9/1/

4

1 に答える 1

1

li要素の CSS に次を追加します。

margin-top: 72px;     /*half of the height */
margin-bottom: -72px; /*half of the height (negative)*/

そう.slot liなります：

.slot li{
    width: 190px;
    height: 144px;
    background-color: blue;
    float: left;
    margin-top: 72px;     /*half of the height */
    margin-bottom: -72px; /*half of the height (negative)*/
}

アップデート：

背景色の問題を解決するには、クラスに次を追加background-color: yellow;します。jSlots-wrapper

.jSlots-wrapper {  
    overflow: hidden; /* to hide the magic */  
    height: 296px; /* whatever the height of your list items are */  
    display: inline-block; /* to size width correctly, can use float too, or width*/  
    border: 1px solid #999;  
    position: absolute;
    width:570px;
    /*bottom: 130px;*/
    margin-top: 2em;
    left:50%;
    margin-left: -285px;
    padding: 0;
    background-color: yellow;
}

アップデート：

の原理はbackground-color画像にも当てはまります。クラスの を最後の要素に使用している画像にbackground-image設定し、高さの半分 (負の値) だけ垂直方向にオフセットします。.jSlots-wrapperlili

更新されたフィドル: http://jsfiddle.net/3bVe9/6/概念実証用 (サイズ 256x256 の「ランダム画像」に GIS によって取得された画像を使用)

アップデート：

では、CSS 定義を次のように変更します.slot li。

margin-top: 72px;     /*half of the height */
margin-bottom: -72px; /*half of the height (negative)*/

に：

margin-top: -72px;     /*half of the height (negative) */
margin-bottom: 72px;   /*half of the height*/

そう.slot liなります：

.slot li{
    width: 190px;
    height: 144px;
    margin-top: -72px;     /*half of the height (negative) */
    margin-bottom: 72px;   /*half of the height*/
    background-color: blue;
    float: left;
    background-size: 190px 144px;
}

CSSの変更を.jSlots-wrapperクラス定義に戻すと、問題は完全に修正されます（色と画像の両方について、別のフィドルがあります：http://jsfiddle.net/3bVe9/7/

これによりスロットが調整され、最初のスロットliが上方にオフセットされ、2 番目のスロットliが中央の開始点になります。再生ボタンをクリックするたびに完全に機能します。

于 2012-10-06T21:57:23.063 に答える