2

ホバー時に画像の両側を拡大しています.IE 10では完璧に機能しますが、FFとChromeでは機能しません.拡大中に画像が揺れます. それがcssまたはブラウザの問題であるかどうかはわかりません.Hereは私が使用しているコードです

HTML -

<div class="welcome-message-1">
    <div class="expanding-block expanding-block-a content-left desktop-left">
        <div class="expanding-block-inner">
            <img class="expanding-block-background" src="http://demo-pinksquid.co.uk/fiddletest/1319512_orig.jpg" />
            <img class="expanding-block-background-contracted" src="http://demo-pinksquid.co.uk/fiddletest/1319512_orig.jpg" />
        </div>
    </div>
</div>

<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>

CSS

.expanding-block-a {
    height: 245px;
    margin: 0 auto 2px;
    max-width: 1030px;
    overflow: hidden;
    position: relative;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    width: 100%;
}
.expanding-block-a .expanding-block-inner {
    height: 245px;
    left: 50%;
    margin-left: -550px;
    margin-top: -110px;
    position: relative;
    top: 50%;
    width: 1100px;
}
.expanding-block-a .expanding-block-background-contracted {
    display: block;
    width: 1100px;
}
p {
    height:50px;
}
.expanding-block-a.hover, .no-js .expanding-block-a:hover {
    max-width: 1100px;
    height: 245px;
}
.expanding-block-a .expanding-block-background {
    display: none;
    height: auto;
    width: 1100px;
}
.expanding-block-a.hover .expanding-block-background, .no-js .expanding-block-a:hover .expanding-block-background {
    display: block;
}

jquery

jQuery(document).ready(function ($) {
    $('.expanding-block-a').hover(

    function () {
        $('.expanding-block').addClass("hover");
    },

    function () {
        $('.expanding-block').removeClass("hover");
    });
});

興味深いのは、ブラウザのスクロールバーがない場合、すべてのブラウザで完璧に動作することです。スクロールバーが表示されると、揺れ始めます。

Jsfiddle : http://jsfiddle.net/fAm6V/1/

jsfiddle の html/javascript ウィンドウ バーを縮小して、画像全体が表示されるようにしてください。

4

1 に答える 1

2

次の CSS にある 2px を削除します。

.expanding-block-a {
    height: 245px;
    margin: 0 auto 2px;  /*<-- remove 2px from here */
    max-width: 1030px;
    overflow: hidden;
    position: relative;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    width: 100%;
}

これにより、移行がスムーズに機能します。 フィドルの例

于 2013-07-12T14:32:47.387 に答える