随滚动条移动的DIV层

最新推荐文章于 2022-05-11 14:32:15 发布

ws297636199

最新推荐文章于 2022-05-11 14:32:15 发布

阅读量451

点赞数

文章标签： div javascript function class xhtml border

<%@ 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>