擷取捲軸所在頁面位置。做一個類似TX的訊息框

function getScroll() {
//t.當前位置（捲軸）裡瀏覽器頂部的高度
//l當前位置（捲軸）裡瀏覽器左邊的長度(0)
//width當前瀏覽器的寬
//頁面加起來的總高度(一般頁面的高度都會大於瀏覽器的高度，所以就有了捲軸)。
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {

t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}

return { t: t, l: l, w: w, h: h };
}

$(function () {
window.onscroll = function () {
var a = getScroll();
document.title = "t=" + a.t + "l=" + a.l + "w=" + a.w + "h=" + a.h;
}
})

這樣，就可以擷取當前頁面的寬度，總高度，和捲軸距離瀏覽器可視地區頂部的高度。

var height = document.documentElement.clientHeight;擷取瀏覽器可視地區的高度。

//這是顯示訊息框，0.5秒鐘就顯示出來，3秒後以0.5的速度隱藏。

function Showdialog(msg) {
var a = getScroll();
var height = document.documentElement.clientHeight;
$("#loginShow").css("left", (a.w - 210) / 2).css("top", height / 2+a.t);
$("#loginShow").slideDown(500);
$("#div2").text(msg);
setTimeout(function () { $("#loginShow").slideUp(500) }, 3000)
}

 

 

div代碼

<div id="loginShow">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>

css代碼

#loginShow{ width:210px; font-family:微軟雅黑; display:none; font-size:18px; height:52px; position:absolute;}
#div1{ width:44px; height:52px; float:left; background:url(/content/images/qzonebg.gif) no-repeat -6px 0px;}
#div2{ width:152px; font-size:18px; color:#4d454f; line-height:50px; padding-left:10px; height:52px; float:left; background:url(/content/images/qzonebg.gif) repeat-x 0px -161px;}
#div3{ width:4px; height:52px; float:left; background:url(/content/images/qzonebg.gif) no-repeat 0px 0px;}

附帶圖片一張