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

  • 相关阅读:
    joda-time的使用
    logger 的使用一 小结
    svn 技巧
    mysql 获取一段时间的数据
    Drools5
    Java各种Utils小结
    Java 8 新特新 工具类 ZonedDateTime
    集合工具类CollectionUtils、ListUtils、SetUtils、MapUtils的使用
    sonar 的使用
    MySQL入门教学(看完必懂,图文详解!)
  • 原文地址:https://www.cnblogs.com/Spirit612/p/5691757.html
Copyright © 2020-2023  润新知