<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>随滚动条移动的DIV层</title>
<style>
.div
{
position: absolute;
border: 2px solid red;
background-color: #EFEFEF;
line-height: 90px;
font-size: 12px;
z-index: 1000;
}
</style>
</head>
<body>
<div id="Javascript.Div1" class="div" style="width: 240px; height: 90px" align="center">
正中...</div>
<script language="JavaScript">
function sc1() {
document.getElementById("Javascript.Div1").style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - document.getElementById("Javascript.Div1").offsetHeight) / 2) + "px";
document.getElementById("Javascript.Div1").style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - document.getElementById("Javascript.Div1").offsetWidth) / 2) + "px";
}
</script>
<div id="Javascript.Div2" class="div" style="width: 240px; height: 90px" align="center">
左上...</div>
<script language="JavaScript">
function sc2() {
document.getElementById("Javascript.Div2").style.top = (document.documentElement.scrollTop) + "px";
document.getElementById("Javascript.Div2").style.left = (document.documentElement.scrollLeft) + "px";
}
</script>
<div id="Javascript.Div3" class="div" style="width: 240px; height: 90px" align="center">
左下...</div>
<script language="JavaScript">
function sc3() {
document.getElementById("Javascript.Div3").style.top = (document.documentElement.scrollTop + document.documentElement.clientHeight - document.getElementById("Javascript.Div3").offsetHeight) + "px";
document.getElementById("Javascript.Div3").style.left = (document.documentElement.scrollLeft) + "px";
}
</script>
<div id="Javascript.Div4" class="div" style="width: 240px; height: 90px" align="center">
右上...</div>
<script language="JavaScript">
function sc4() {
document.getElementById("Javascript.Div4").style.top = (document.documentElement.scrollTop) + "px";
document.getElementById("Javascript.Div4").style.left = (document.documentElement.scrollLeft + document.documentElement.clientWidth - document.getElementById("Javascript.Div4").offsetWidth) + "px";
}
</script>
<div id="Javascript.Div5" class="div" style="width: 240px; height: 90px" align="center">
右下...</div>
<script language="JavaScript">
function sc5() {
document.getElementById("Javascript.Div5").style.top = (document.documentElement.scrollTop + document.documentElement.clientHeight - document.getElementById("Javascript.Div5").offsetHeight) + "px";
document.getElementById("Javascript.Div5").style.left = (document.documentElement.scrollLeft + document.documentElement.clientWidth - document.getElementById("Javascript.Div5").offsetWidth) + "px";
}
</script>
<script language="JavaScript">
<!--
function scall() {
sc1(); sc2(); sc3(); sc4(); sc5();
}
window.onscroll = scall;
window.onresize = scall;
window.onload = scall;
//-->
</script>
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;">
</div>
</body>
</html>
随滚动条移动的DIV层
最新推荐文章于 2022-05-11 14:32:15 发布