Question

我有一个包含两个图像的内容,一个层次上。含有元素的左侧和三行。我使用了“ j子板”,把图像放在其中。我不得不使用 j,因为它是一个反应灵敏的设计,因此图像规模发生变化。所有这一切都与一些移动装置大相径庭。图像宽度似乎在压力随机元素之前计算? 我希望这一点是有意义的。 URL是可变的.co.uk及其左边,其形象更大。

** 本文件迟交。

Sorry I didn t make it clear that, the solution I have used works fine but on mobile devices the width and left margin doesn t seem to be calculated on load? After maybe 20 seconds it seems to pop into position.

EDIT**

<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>

c)

#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 ).c)( margin-left  ,  - + position +  px );

}

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

//Set image height

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

setImageHeight();

});

$(window).resize(function() {

setImageHeight();


});

});

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

Answer 2

尝试:

left = ($("#mass-cont").width() - $(".bottom").width()) / 2;
$(".bottom").css("left", left)

友情链接