0

私のコードは次のようになります

CSS〜

 div{
 display:inline; <!-- this is where I need the help -->
 }


a img{
margin: 5px;
box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
    -webkit-box-shadow: 3px 3px 5px #000;

}
.getbig{ 
top: 0px;
width:136px;
height:112px;
}
.bigimage{
width:100%;
height:100%;
left:15px;
top:15px;
}

HTML〜

<div class="getbig">

<a href="../pictures2/band1.jpg" target="_blank" ><img  src="../thumbnails/1.jpg" width="136" height="112" class="bigimage" alt="No Limit Texas" title="No Limit Texas"></a> 

<a href="../pictures2/band4.jpg" target="_blank"><img src="../thumbnails/4.jpg"  width="136" height="112" class="bigimage" alt="No Limit Texas" title="No Limit Texas"> </a>

<a href="../pictures2/band5.jpg" target="_blank"><img src="../thumbnails/5.jpg"  width="136" height="112" class="bigimage" alt="No Limit Texas" title="No Limit Texas"></a>

<a href="../pictures2/band7.jpg" target="_blank"><img src="../thumbnails/7.jpg"  width="136" height="112" class="bigimage" alt="No Limit Texas" title="No Limit Texas"> </a>
</div>

jQuery

$(document).ready(function(){

$('.bigimage').mouseover(function(){

  $(this).stop().animate({
      "width": "105%",
      "height": "105%",
      "left":"0px",
      "top":"0px"
      }, 200,'swing');
}).mouseout(function(){ 
  $(this).stop().animate({"width": "100%","height":"100%","left":"15px","top":"15px"},200,'swing');
});;
 });

つまり、これは、画像にカーソルを合わせると画像が5％大きくなり、マウスをオフにすると通常の状態に戻るだけです。

ここに私の質問があります：なぜ、私がdisplay：inlineを選択したとき、それらのすべての画像が狂ったように成長するのですか？私の問題は、これをブラウザに表示すると、すべてが下に表示されるので、それを望まないということです。それらを隣り合わせにするか、インラインのようにしたいのですが、そのdivをdisplay：inline;に設定すると、それはすべてを大規模に成長させるだけです。

何か案は？

4

1 に答える 1

1

これは、コンテナdivの100％を取得するように幅と高さを設定したためです。私はあなたのコードを複製し、Jsfiddleでデモンストレーションしました

var divheight = $('.bigimage').height();
var divwidth = $('.bigimage').width();
$('.bigimage').mouseover(function() {



    var new_height = divheight * 1.05;
    var new_width = divwidth * 1.05;
    $(this).stop().animate({
        "width": new_width + "px",
        "height": new_height + "px",
        "left": "0px",
        "top": "0px"
    }, 200, 'swing');
}).mouseout(function() {
    $(this).stop().animate({
        "width": divwidth,
        "height": divheight

    }, 200, 'swing');

});;​

ホバー関数の外で変数を設定したことに注意してください。その理由は、height（）関数とwidth（）関数が画像の実際の現在のサイズを取得するためです。

また、CSSを少し変更しました。

各画像の実際の幅がわかっている場合は、CSS3トランジションを使用できます。

.bigimage{
    left:15px;
    top:15px;
    width:112px;
    height:160px;
     -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);

}



.bigimage:hover {
    height:120px; 
    width:200px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
}
于 2012-12-15T04:07:49.047 に答える