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

这是因为您已将宽度和高度设置为抓取 100% 的容器 div。我已经复制了您的代码并在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 回答