1

2つの画像を含む要素があり、一方が他方の上に重ねられています。含まれている要素は、左に3列に浮かんでいます。jQueryの修正を使用して、画像をその要素の中央に配置しました。レスポンシブデザインであるため、画像のサイズが変わるjQueryを使用する必要がありました。これはすべて、一部のモバイルデバイスを除いてうまく機能します。ランダムな要素が押されるまで画像の幅は計算されないようですか？これが理にかなっていることを願っています。URLはmooble.co.ukで、その左側の大きな画像がページの下にあります。

**編集

申し訳ありませんが、私が使用したソリューションは正常に機能しますが、モバイルデバイスでは、幅と左マージンが負荷時に計算されていないようです。おそらく20秒後、それは所定の位置に飛び出すようです。

編集**

<div class="g1" id="mass">
<p><span class="highlight"></span></p>
<div id="mass-cont">

<img class="bottom" src="images/mass.png" />
<img class="top" src="images/no-mass.png" />


</div>

</div>

css

#mass{position:relative;}
#mass-cont{}
#mass img{position:absolute;left:50%;}
#mass img{transition: opacity 1s ease-in-out;display:block;}
#mass img.top:hover{opacity:0;}

JS

//Functions
function setImageHeight(){

var imageSize = $('.bottom').height();
$('#mass-cont').height(imageSize);

var imageWidth = $('.bottom').width();
var position = imageWidth / 2;

$('#mass-cont > img').css('margin-left' , '-'+ position + 'px');

}

//Load Document
$(document).ready(function() {

//Set image height

$('.bottom').load(function(){

setImageHeight();

});

$(window).resize(function() {

setImageHeight();


});

});
4

2 に答える 2

1

私は過去にウィンドウ幅に基づいてそれを行い、要素の左マージンを設定しました。

$(window).resize(function() {
 setPosition();
});

$(document).ready(function () {
 setPosition();
});

function setPosition(){
var WindowWidth = $(window).width();
var BottomWidth = 300; //The width of bottom
Left Position = (WindowWidth - BottomWidth) / 2;
$(".bottom").css("margin-left", BottomWidth + "px");
}
于 2012-05-11T11:12:57.050 に答える
0

これを試して：

left = ($("#mass-cont").width() - $(".bottom").width()) / 2;
$(".bottom").css("left", left)
于 2012-05-11T08:55:59.730 に答える