2

ギャラリーを作成しようとしていますが、スケールプロパティに問題があります。いくつかの要素にすばやくカーソルを合わせると、scale（）が原因で要素が約1px前後に移動し始めるようです。

HTML：

    <section id="first">
                        <section>
                             <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />  
                            <a href="#">
                                <div class="shade">

                <h5>Cappuccino</h5>
                                <p>
                                    This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                </p>
                            </div>
                            </a>
                        </section>
                        <section>
                             <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />  
                            <a href="#">
                                <div class="shade">
                                <h5>Cappuccino</h5>
                                <p>
                                    This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                </p>
                            </div>
                            </a>
                        </section>
                        <section>
                             <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />  
                            <a href="#">
                                <div class="shade">
                                <h5>Cappuccino</h5>
                                <p>
                                    This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                </p>
                            </div>
                            </a>
                        </section>
                        <section>
                             <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />  
                            <a href="#">
                                <div class="shade">
                                <h5>Cappuccino</h5>
                                <p>
                                    This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                </p>
                            </div>
                            </a>
                        </section>
                        <section>
                             <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />  
                            <a href="#">
                                <div class="shade">
                                <h5>Cappuccino</h5>
                                <p>
                                    This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                </p>
                            </div>
                            </a>
                        </section>
                        <section>
                             <img src="http://tympanus.net/Tutorials/OriginalHoverEffects/images/1.jpg" />  
                            <a href="#">
                                <div class="shade">
                                <h5>Cappuccino</h5>
                                <p>
                                    This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
                                </p>
                            </div>
                            </a>
                        </section>

CSS：

#first img, .shade{
    margin-left:0.5%;
    margin-bottom:0.5%;
}
#first>section{
    position:relative;
    float:left;
    margin: 0.7% 0.7% 0 0;
    overflow:hidden;
    width:273px;
    height:182px;
}
#first>section img{
    position:relative;
    -webkit-transition: all 0.2s linear;
}
#first>section>img:hover{
     -webkit-transition: all 0.2s linear;
}
.shade:hover{
    opacity:1;
}
.shade{
    width: 253px;
    height: 162px;
    background:rgba(255, 144, 0, 0.65);
    position:absolute;/* needed*/
    top:0;/* needed*/
    left:0;/* needed*/
    opacity:0;
    color:#fff;
    padding:10px;
    -webkit-transition: all 0.2s ease-in-out;
}
.shade p{
    margin-top:60px;
    width: 255px;
}
.shade h5{
    text-decoration:underline;
    font-size:110%;

jQuery：

$(window).load(function(){


picLink=$("#first a");
picLink.mouseover(function(){
$(this).prev().css("-webkit-transform","scale(1.3)");
});
picLink.mouseout(function(){
$(this).prev().css("-webkit-transform","scale(1.0)");
});

});

これが実際の例です：http： //jsfiddle.net/VJWg6/1/

4

1 に答える 1

2

「前後に移動する」とは、左側の1px幅の小さなスペースをカバーする画像のこのわずかに邪魔な効果を意味すると思います。

margin-leftこれは、プロパティが指定されているために発生します（ #first img）。このマージンはoverflow:hiddenコンテナ内のスペースを保持sectionするため（）、画像のサイズが変更されると、単にこのスペースをカバーします。

margin-left解決策として、上の画像を削除して移動することができsectionます（もちろん、コンテキストが変わるため、パーセンテージを調整する必要があります）。

この小さな修正： http： //jsfiddle.net/VJWg6/23/

于 2013-02-22T19:03:13.163 に答える