3

CSSで特定の効果を実現する方法がわかりません。私は次のHTMLを持っています：

<div id="container" name="container">
    <div id="scroll" name="scroll"></div>
 </div>

スクローラーは、幅が715pxのスクローラー内に1つの画像をロードします。

[[1]]

ユーザーがその画像をクリックすると、2番目の画像が最初の画像に動的に追加されます。

[[1][2]]

そして、2番目がクリックされると、同じことが起こります（以下同様）。

[[1] [2] [3]]

さて、ここで私は助けが必要です。シリーズの最後の表示画像をクリックすると、前の画像を左にスクロールして新しい画像用のスペースを確保し、最初の画像を非表示にして、新しい画像を最後に配置します。

[[2] [3] [4]]
<-------------->

これは無期限に続きます。最後の画像がクリックされるたびに、前の画像が左にスクロールして、新しい画像がDIV内の右端のビューに配置されます。

[[3] [4] [5]]
<-------------->

私は以下のCSSで遊んだことがあります（あなたが見るのは私の最近の試みの状態です）。私が達成できたことは次のとおりです。

1）画像は連続して作成され、4番目の画像が715pxのマークを超えると（右側に）オーバーフローします。私が欲しいものではありません。

2）以下のCSSは、私が望むことを「実行」します（一種の）-DIVの左側から始まり、715pxのマークまで機能し、画像を（後方に）左に押し出し、表示されなくなります-常に最新の画像をDIVの右端に残して表示します。これに伴う問題は、注文が反転していることです（RTLが原因だと思います）。text-align：leftでだまそうとしましたが、何も起こらないようです。

何か案は？提案をいただければ幸いです。ありがとう。

#container
{
    width: 715px;
    height: 228px;
    overflow: hidden;
    position:relative;
    / * text-align:left; */
}

#scroll
{
    height: 228px;
    white-space: nowrap;
    direction: rtl;
    /* text-align:left; */

}
4

9 に答える 9

1

デモページを作成しました。Firefox、Safari、Opera、IE8でうまく機能します。

それは実際にはJSソリューションです。魔法はここに行きます：

document.getElementById('container').scrollLeft = last_img.offsetLeft;
于 2009-10-15T08:32:34.823 に答える
1

おかげさまで、ようやく答えが返ってきました（これは「ベンC」の功績によるものです）。トリック（私にとっては）：

unicode-bidi：bidi-override。

HTML（テスト用のスクリプト付き）は次のとおりです。

<script type="text/javascript">
var interval = null;
var count = 10;

function addImage()
{
    var container = document.getElementById("imgContainer");
    var img = document.createElement("img");
    img.setAttribute("src", "flowers-100.png");
    container.appendChild(img);

    if (--count == 0) clearInterval(interval);
}

function main()
{
    interval = setInterval("addImage()", 2000);
}

window.onload = main;
        </script>
        <style type="text/css">
            div
            {
                white-space: nowrap;
                overflow: scroll;
                direction: rtl;
                border: 2px solid blue;
                width: 600px;
                height: 110px;
                text-align: left;
            }
            div span
            {
                direction: ltr;
                unicode-bidi: bidi-override;
            }
            img
            {
                margin-right: 10px;
            }
        </style>

そして、ここに実装へのリンクがあります：

http://www.tidraso.co.uk/misc/imgContainer/

于 2009-11-25T19:00:19.687 に答える
0

この作品のようなものになります：

#container{overflow:hidden;}
#scroll {float:right;min-width:715px;}

つまり、それがどのように機能するかはわかりませんが、そのための条件付きコメントでコードシェルパのソリューションをロードすることができます

于 2009-09-27T21:38:56.333 に答える
0

フロートが残っているスクロールdiv内の別のdivはどうですか？試したことはありませんが、うまくいくと思います。

于 2009-09-25T13:02:23.167 に答える
0

OK、IEで動作するようになりましたが、Firefoxでは動作しませんでした。

#container
{
    width: 715px;
    height: 228px;
    border: solid 3px purple;
    overflow:auto;
}
#scroll
{
    height: 223px;
    white-space: nowrap;
    float:right;
    margin-left: -715px;
    border: solid 2px red;
}

そこにあるCSSの達人は、両方で機能させる方法を知っていますか？

于 2009-09-25T16:53:07.517 に答える
0

たとえば、CSSの他のすべてと同様に、 IEに特定のCSSを使用します。

#scroll {
    height: 223px;
    white-space: nowrap;
    float:right;
    margin-left: -715px;
    border: solid 2px red; min-width:715px;
}
* html #scroll
{
    min-width: auto;
}
于 2009-09-30T14:57:09.380 に答える
0 
#scroll img {float:left}
于 2009-10-03T04:15:54.037 に答える
0

なしで最初の試みを試すことができますdirection:rtl。
次に、画像を追加するJavaScriptで、新しい画像の位置を計算scrollLeftし、スクロールdivに設定します。

scroll.scrollLeft = theNewImagePosition ;
于 2009-10-14T13:24:45.837 に答える
0

私はプロジェクトのためにこれを行いました、これは私がしたことです。

[ [img1] [img2] [img3] ]

これらの画像をラップする外側のDIVには、すべての画像（マージンなどを含む）の幅に等しい幅が与えられます。

次に、「left」のcssプロパティを使用して、行を左にシフトします。

left: -100px;
overflow: hidden; /* up to you if you need this */

私の例では、左にシフトされた値は次のとおりです。

width_of_all_images_plus_margins - width_of_display_area

お役に立てば幸いです。十分に説明していない場合はお知らせください...

于 2009-10-22T13:46:23.700 に答える