[英]How to show fixed div in middle of screen when screen show bottom of page
我設計了一個包含許多小圖像的頁面,我喜歡單擊小圖像然后打開一個固定的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代碼:
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();
})
我不確定,但是為什么不嘗試:
$(".DivOfImage").css({'position': 'fixed', 'top': TopPostion + 'px', 'left': LeftPostion + 'px'});
代替
$(".DivOfImage").offset({ top: TopPostion, left: LeftPostion});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.