• 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  将它调到页面中间即可。滚动时便会根据位置显示在屏幕中间。

  • 相关阅读:
    python基础6 迭代器 生成器
    Netty入门之客户端与服务端通信(二)
    Netty入门之HelloWorld
    Java并发之BlockingQueue的使用
    Java并发之Semaphore的使用
    Java并发之CyclicBarria的使用(二)
    Java并发之CyclicBarria的使用
    Java并发之CountDownLatch的使用
    MongoDB的下载与安装
    Hibernate5.2之反向工程
  • 原文地址:https://www.cnblogs.com/allenzhang/p/6813060.html
Copyright © 2020-2023  润新知