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;
        background-color: #DCDCDC;
    }

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

  • 相关阅读:
    NIO简述
    函数式编程
    ReadWriterLock读写锁
    Semaphore工具类使用
    CyclicBarrier工具类使用
    CountDownLatch工具类使用
    创建VUE+Element-UI项目
    <slot>插板使用
    Spring面试题
    实现定时任务的几种方式
  • 原文地址:https://www.cnblogs.com/Spirit612/p/5691757.html
Copyright © 2011-2022 走看看