zoukankan      html  css  js  c++  java
  • css+js定位到屏幕中间

    ex:让一个div始终显示在屏幕中间

    一、

    css:#idName{position: absolute;z-index: 999; ?px;margin-top: ?px;}//此处的初始定位按具体的自己调

    计算并设置页面滚动条改变时移动的距离:

    function sc1(idName) {
        var d = document.getElementById(idName);
        d.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - d.offsetHeight) / 2) 【此处加上或减去上移或者下移的高度】+ "px";
        d.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
    }

        function scall() {
            sc1("idName");
            }

                window.onscroll = scall;
                window.onresize = scall;
                window.onload = scall;

    若是和diaplay一起使用  在显示后再调用             

                window.onscroll = scall;
                window.onresize = scall;

     二、纯css实现始终显示在屏幕中间

    ex:

    #div_window {
         400px; /**宽度**/
        height: 300px; /**高度**/
        position: fixed; /**定位采用此种方式**/
        left: 50%; /**左边50%**/
        top: 50%; /**顶部50%**/
        margin-top: -100px; /**上移-50%**/
        margin-left: -150px; /**左移-50%**/
        display: none;
        border: 1px black solid;
        
    }

    样式和宽高自己定,根据宽高调整margin-top,margin-left  将它调到页面中间即可。滚动时便会根据位置显示在屏幕中间。

  • 相关阅读:
    排座椅
    关于math.h的问题
    客户调查
    排队打水
    删数游戏
    小数背包
    零件分组
    桐桐的组合
    桐桐的数学游戏
    桐桐的全排列
  • 原文地址:https://www.cnblogs.com/allenzhang/p/6813060.html
Copyright © 2011-2022 走看看