用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元      
广告位招租中
2021年 儿童节 23
2021年 端午节 36
2022年 元 旦 237
2022年 春 节 268
 
  • 您现在的位置:首页 >> JS >> 内容

    随滚动条移动的层

    内容摘要: !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'HEADTITLE随滚动条移动的层 - ......

      <!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>

    <TITLE>随滚动条移动的层 - 51windows.Net</TITLE>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">

    <META NAME="Author" CONTENT="haiwa">

    </HEAD>

    <style>

    <!--

    .div{

    position: absolute;

    border: 2px solid red;

    background-color: #EFEFEF;

    line-height:90px;

    font-size:12px;

    z-index:1000;

    }

    -->

    </style>

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

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/4/20 发布时间:15:28:42 点击:180 录入:齐天大圣
  • 上一篇:无图片的圆角表格
  • 下一篇:JavaScript使用canvas绘制坐标和线
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.1 Build 21.05.08(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021
    您正在使用IPV4(3.230.154.160)访问本站 您本次共访问本站 1 次