Question

我的代码看起来像这样

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％，然后当我鼠标移开时恢复正常。

这是我的问题：为什么，当我选择显示：内联时，所有这些图像都会变得疯狂。我的问题是，当你在浏览器中显示它时，它们都在彼此之下，我不希望这样。我希望它们彼此相邻或者像内联一样，但是当我设置那个div来显示时：inline;它只是让一切都变得很大。

有什么想法吗？

Answer 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);
}

当我将显示设置为内联时，为什么图像会变得像疯了一样

1 个答案: