【JavaScript】懸浮窗口
馬嘉楠 2009-01-13
共同學習，歡迎轉載。轉載請注明地址【http://blog.csdn.net/majianan/archive/2009/01/11/3754521.aspx】，謝謝O(∩_∩)O！
主要是window.onscroll的運用
效果如圖：
代碼如下：
<html>
<head>
<title>懸浮窗口示例</title>
<script type="text/javascript">
window.onscroll = function () {
var div = document.getElementById("divSuspended");
div.style.top = document.body.scrollTop;
}
window.onresize = window.onscroll;
function init(){
var df = document.createDocumentFragment();
for(var i=0;i<20;i++){
var p = document.createElement("p");
p.appendChild(document.createTextNode(" Line "+i));
df.appendChild(p);
}
document.body.appendChild(df);
window.onscroll();
}
</script>
</head>
<body onload="init()">
<p>Try scrolling this window.</p>
<div id="divSuspended" style="position: absolute; buttom: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">這是懸浮窗口</div>
</body>
</html>
馬嘉楠
jianan.ma@gmail.com
posted on 2009-01-13 08:16
馬嘉楠 閱讀(1407)
評論(0) 編輯 收藏 所屬分類:
SoureCode 、
Java Script