ホバー時に画像の両側を拡大しています.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 ウィンドウ バーを縮小して、画像全体が表示されるようにしてください。