0

行に作成された div があり、それらをズームすると、次の div がページの下に移動します。それらを次のレベルに移動させたくありません。代わりに、HTML の幅を増やして、同じレベルにとどまらせたいと考えています。練習用に作成したもののjsfiddleを見つけました。画像をクリックするとズームされ、いくつかのズームの後、右側の画像が次のレベルに移動します。私にとって、これは起こるべきではありません。これを行う方法？

jsFiddle へのリンクは次のとおりです: http://jsfiddle.net/bq6Ju/14/ 以下のコードは、スタック オーバーフロー学者の 1 人によって書かれています。

              .flower {
display: block;
float: left;
margin: 10px;
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid red;
}

.flower img {
width: 100%;
height: 100%;
}
.flower div {
width: 200px;
height: 200px;
position: relative;
}

.chunk2 div {
left: -100px;
}
.chunk3 div {
top: -100px;
}
.chunk4 div {
top: -100px;
left: -100px;
}

HTMLコードは

Javascript/Jquery コードは

$('div.flower').click(function(){

var resize = 1.30;

var $this = $(this);
var $inner = $this.find('div');

$this.animate({          
    'width': $this.width() * resize,
    'height': $this.width() * resize,   
});

var p = {
    top: parseInt($inner.css('top')),
    left: parseInt($inner.css('left'))
}
console.log(p);
$inner.animate({
    'width': $inner.width() * resize,
    'height': $inner.width() * resize,
    'top': p.top*resize,
    'left': p.left*resize,        
});   

});
4

3 に答える 3

1

フローティングコンテナを追加することnowrapもできます。

http://jsfiddle.net/bq6Ju/19/

.container {
    float: left;
    white-space: nowrap;
}
于 2012-08-25T00:23:26.913 に答える
1

画像の周りにコンテナーを追加して、オーバーフロー プロパティによって折り返しを防止し、スクロールバーを追加できます。

.container { overflow: auto; white-space: nowrap; }

これを機能させるために を削除したわけではありませfloatん。そして、displayプロパティをに変更しましたinline-block。vertical-alignまた、画像が常に上揃えになるようにプロパティを追加しました。

.flower {
    display: inline-block;
    margin: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid red;
    vertical-align: top;
}

ここでデモを見ることができます: http://jsfiddle.net/bq6Ju/18/

于 2012-08-24T23:59:54.837 に答える
0

デモ: http://jsfiddle.net/bq6Ju/26/

HTML:

<div class="row">
<div class="row_wrapper">
  <div class="flower chunk1">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>
  <div class="flower chunk2">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>
  <div class="flower chunk3">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>
  <div class="flower chunk4">
    <div>
      <img src="http://assets.freeprintable.com/images/item/thumb/lotus-flower.jpg"/>
    </div>
  </div>

  <div style="clear: both;"></div>
</div>
</div>

<!-- and here more rows -->

CSS:

.row {
  overflow-x: scroll;
}

.row_wrapper {
  width: 500px; /* initial width */
}

/* other your css */

JavaScript

// in click handler

var total_width = 0;
var cur_outer = $(this).outerWidth(true) - $(this).width();
var cur_inner = resize * $(this).width();
var total_width = cur_outer + cur_inner;

$(this).parent().children('.flower').not(this).each(function () {
  total_width += $(this).outerWidth(true);
});

$(this).parent().width(total_width + 10);
于 2012-08-25T05:43:22.027 に答える