0

我使用 Css3 边框半径生成了图像的圆形缩略图。我想要鼠标悬停动画，其中圆形缩略图尺寸在鼠标悬停时增长并在鼠标移出时返回原始尺寸。并且尺寸从圆圈中心增加，该圆圈的左右缩略图重叠。

CSS：

 #baar{position:fixed;width:100%;height:110px;background:black;top:130px;}

    ul#block{ display:inline-block; list-style:none; position:relative;left:0px;}

    ul#block li{float:left; list-style:none;width:110px; height:110px;overflow:visible; position:relative; text-align:center;padding-left:5px}

    ul#block li img {background:grey;width:100px; height:100px;border :5px solid red;border-radius:55px 55px 55px 55px;}

html:

<body>
<div id="baar">
    <ul id="block">
        <li><img></li>   
         <li><img></li> 
         <li><img></li> 
         <li><img></li> 
    </ul>    
</div>
</body>

这是我拥有的jquery，它给了我维度增长的动画，但圆圈不会保持在初始中心。宽度向右增加，高度向下增加。

$("ul#block li img").mouseover(function() {
$(this).animate({'width':130, 'height':130}, {duration:100});
                    }).mouseout(function(){

$(this).animate({'width':110, 'height':110}, {duration:100});
                    });

jsfiddle：http: //jsfiddle.net/k9nQU/15/

因此，请帮助我为动画编写适当的 jquery，其中圆圈长大，保持中心不变，并在动画期间重叠缩略图。

4

2 回答 2

2

最简单的方法是使用 CSS3 的转换 + 变换。

div {
    background: hotpink;
    width: 50px;
    height: 50px;
    -webkit-transition: -webkit-transform 250ms;
    transition: transform 250ms;
}
div:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

如果你真的需要用 jQuery 来做，那么除了它的宽度/高度之外，你还需要使用元素的位置。

于 2013-02-07T09:32:56.940 回答
2

CSS3：

ul#block li img {
    background:grey;
    width:100px; 
    height:100px;
    border :5px solid red;
    border-radius: 55px;
    position: relative;
    left: 0;
    top: 0;
    -webkit-transition: all .1s ease;
}
ul#block li img:hover {
    width:120px; 
    height:120px;
    left: -10px;
    top: -10px;
    border-radius: 65px;
    -webkit-transition: all .1s ease;
}

jQuery：

$('ul#block li img').on('mouseover', function() {
    $(this).animate({
        width: '120px',
        height: '120px',
        left: '-10px',
        top: '-10px',
        borderRadius: '65px'
    }, 100);
});
$('ul#block li img').on('mouseout', function() {
    $(this).animate({
        width: '100px',
        height: '100px',
        left: '0px',
        top: '0px',
        borderRadius: '55px'
    }, 100);
});

并记住为这些图像添加“位置：相对”！

于 2013-02-07T09:09:37.637 回答