0

Css3 border-radius を使用して画像の円形サムネイルを生成しました。マウスをホバーすると円のサムネイルの寸法が大きくなり、マウスを離すと元の寸法に戻るマウスオーバーアニメーションが必要です。円の中心から寸法が増加し、その円の左右のサムネイルが重なっています。

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:

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

そして、これらの画像に「position: relative」を追加することを忘れないでください!

于 2013-02-07T09:09:37.637 に答える
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 に答える