Question

我设计了一个包含许多小图像的页面，我喜欢点击小图像然后打开一个固定的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:fixed;
}

JQuery CODE：

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();
})

Answer 1

我不确定，但为什么不尝试：

$(".DivOfImage").css({'position': 'fixed', 'top': TopPostion + 'px', 'left': LeftPostion + 'px'});

而不是

$(".DivOfImage").offset({ top: TopPostion, left: LeftPostion});

当屏幕显示页面底部时，如何在屏幕中间显示固定div

1 个答案: