【Javascript】入门之实现盒子水平垂直居中

最新推荐文章于 2023-09-07 08:55:52 发布

夹心776655

最新推荐文章于 2023-09-07 08:55:52 发布

阅读量865

点赞数

分类专栏：代码实例 js交互设计文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_37086980/article/details/110798469

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述: 用JS动态实现盒子水平垂直居中(考虑scroll和resize的情况)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 2000px;
            height: 2000px;
        }
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            display: none;
        }
        span {
            position: absolute;
            right: 10px;
            top: 10px;
        }
    </style>
</head>

<body>
    <button>显示</button>
    <div>
        <span>X</span>
    </div>
    <script>
        /* 
            点击显示按钮，让div居中显示出来
            1. 获取元素  div  btn
        */
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        console.log(btn, div);
        btn.onclick = function () {
            // 让div居中显示
            // 1. 显示
            div.style.display = 'block';
            // 2. 设置left  left = 屏幕宽度的一半 - 盒子宽度的一半
            div.style.left = document.documentElement.clientWidth / 2 - div.offsetWidth / 2 + 'px';
            // 3. 设置top
            div.style.top = document.documentElement.clientHeight / 2 - div.offsetHeight / 2 + 'px';

        }
        // 屏幕滚动的时候 让div居中
        window.onscroll = function () {
            var st = document.documentElement.scrollTop;
            var sl = document.documentElement.scrollLeft;
            // 2. 设置left  left = 屏幕宽度的一半 - 盒子宽度的一半 + 鼠标滚动的距离
            div.style.left = document.documentElement.clientWidth / 2 - div.offsetWidth / 2 + sl + 'px';
            // 3. 设置top
            div.style.top = document.documentElement.clientHeight / 2 - div.offsetHeight / 2 + st + 'px';
        }

        // 屏幕大小改变的时候  div居中
        window.onresize = function(){
            // 2. 设置left  left = 屏幕宽度的一半 - 盒子宽度的一半
            div.style.left = document.documentElement.clientWidth / 2 - div.offsetWidth / 2 + 'px';
            // 3. 设置top
            div.style.top = document.documentElement.clientHeight / 2 - div.offsetHeight / 2 + 'px';
        }

        // 点击span  让div隐藏
        var span = document.querySelector('span');
        span.onclick = function(){
            div.style.display = 'none';
        }
    </script>
</body>

</html>

夹心776655

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】入门之实现盒子水平垂直居中

描述: 用JS动态实现盒子水平垂直居中(考虑scroll和resize的情况)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫