0

画面外の最後のフローティング画像までスクロール

こんにちは、みんな

ここにデモがあります - http://www.ttmt.org.uk

これは、画面外に浮かんでいる画像の単純なリストです。

コンテナの幅をフロートできるように設定しているため、画像が画面からフロートします。

スクロールして画像を表示すると、最後の画像をスクロールして、ただの板のスペースになります。

コンテナの幅を設定して画像を浮かせ、最後の画像でスクロールを停止するにはどうすればよいですか。

    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <!--css-->
      <link rel="stylesheet" href="css/master.css" />

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        ul{
          width:100%;
        }
        li{
          list-style:none;
          float:left;
          margin:0 10px 0 0;
        }
        .wrap{
          padding:20px;
          overflow:auto;
          width:5000px;
          background:#eee;
        }
      </style>


      <title>Title of the document</title>
      </head>

    <body>

      <div class="wrap">
        <ul>
          <li><img src="01.jpg" /></li>
          <li><img src="02.jpg" /></li>
          <li><img src="03.jpg" /></li>
          <li><img src="04.jpg" /></li>
          <li><img src="05.jpg" /></li>
        </ul>  
      </div>  

    </body>

    </html>
4

4 に答える 4

0 
.wrap {width:auto; white-space: nowrap;}
li {float:none; display:inline-block}

それでいいよ

于 2013-09-26T12:07:17.777 に答える
0

以下のコードを試してください:

.wrap {
    background: none repeat scroll 0 0 #EEEEEE;
    height: 510px;
    margin: 0 auto;
    overflow: auto;
    padding: 20px;
    width: 1000px;
}
ul {
    width: 3500px;
}

これにより、ウィンドウではなくdivにスクロールが追加されます。

これがあなたを助けることを願っています。

于 2013-09-26T12:07:32.763 に答える
0

jquery でそれを行うことができます：

デモ

そのようなもので：

var margin = 10; //constant
var totalWidth = 0;

$('.wrap img').each(function() {
  totalWidth = totalWidth + $(this).width() + margin;
});

$('.wrap').width(totalWidth);

foreachとで各画像の幅を追加して画像の合計幅を取得し$(this).width()、すべての画像に余白を追加することを忘れずに、新しい幅を に設定して終了しますwrap。

純粋なcssでそれを行う簡単な方法があるかもしれませんが、私が試したすべてがうまくいきませんでした...

私があなたを助けたことを願っています

于 2013-09-26T12:37:06.527 に答える