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

  • 相关阅读:
    学习笔记
    聊聊字节序
    SPDK发送和接收连接请求的处理
    企业设备维护——不仅仅是解决问题
    怎样快速找到某一行代码的git提交记录
    生产环境中利用软链接避免"rm -rf /"的方法
    程序员五年小结
    Django Model 数据库增删改查
    python中字符串列表字典常用方法
    python编辑配置
  • 原文地址:https://www.cnblogs.com/allenzhang/p/6813060.html
Copyright © 2011-2022 走看看