我创建一个包含小图像的页面,我想单击它,然后在绝对div中打开大图像,这确实可以正常工作。但是当窗口显示在页面底部并且我们点击小图像时,它会出现在屏幕顶部,我不喜欢它。我希望它每次都出现在屏幕中央,请在此页面中查看:
http://www.3dcreate.ir/New3DCreate/Pages/Gallery/3DGallery/3dg_Chosen.php
我的代码示例是:
HTML代码:
<!-- This is Div of Large Image and Background Shade -->
<div class="BackgroudShade"></div>
<div class="DivOfImage"><img class="LargeImage"/></div>
CSS代码:
.DivOfImage {
border: 8px solid #FFF;
color:#FFF;
background-color:#FFF;
border-radius:10px;
position:absolute;
}
jQuery代码:
function LoadShowDiv () {
$('.BackgroudShade').slideDown(800); // shade of background will be visible
$(".DivOfImage").show(); // Div of Large Image will be visible
// When Image loaded successful then set width,height and top,left of Large Image Div
// but i want set top,left when screen is scroll down to bottom of page
// then show Div at middle of screen in every time
$('.LargeImage').load(function() {
$('.DivOfImage').width($('.LargeImage').width());
$('.DivOfImage').height($('.LargeImage').height());
var LeftPostion = (WidthOfScreen - $('.LargeImage').width()) / 2;
var TopPostion = (HeightOfScreen - $('.LargeImage').height()) / 2;
$(".DivOfImage").offset({ top: TopPostion, left: LeftPostion});
$('.LargeImage').show(1000);
})
}
$('#SmallImage').click(function(){
$('.LargeImage').attr('src','LargeImage.jpg');
LoadShowDiv();
})
最佳答案
您无需使用所有这些JS来计算并在屏幕中间显示图像。
您可以使用CSS设置样式和位置,然后使用JS隐藏/显示。您的位置:固定;然后您可以轻松地在屏幕上定义位置。
尝试这样的事情:
CSS
.LargeImage {
position: fixed;
top: 50%;
left: 50%;
margin-top: -(half of image height);
margin-left: -(half of image width);
}
这会将图像留在屏幕中央
关于javascript - 如何在屏幕中心适合绝对div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20539706/