超详细拥有遮罩层的登录页面

最新推荐文章于 2024-07-05 17:24:29 发布

努力学习的小蜗牛

最新推荐文章于 2024-07-05 17:24:29 发布

阅读量640

点赞数 3

本文链接：https://blog.csdn.net/weixin_45806273/article/details/109228015

版权

本文详细介绍了如何制作一个带有遮罩层的登录页面，重点讲解了遮罩层的实现原理和拖拽功能的实现步骤。通过在页面外层设置透明盒子作为遮罩层，并在其中放置登录框，再利用绝对定位和事件监听实现拖拽效果，确保登录框可以随鼠标移动。

摘要由CSDN通过智能技术生成

首先实现遮罩层的思路是在外层设置一个透明的盒子，设置宽高，定位背静颜色设置透明，然后在里面放另外一个盒子
其次实现拖拽的方法：
1、一定要绝对定位，脱离文档流才可以移动。
2、绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。
3、点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。移动：通过 a - c 建立鼠标与div的关系，防止鼠标超出div。

下面来附上完整的代码

<!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>
        .login-header {
   
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }

        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
   
            padding: 0px;
            margin: 0px;
        }

        .login {
   
            width: 512px;
            height: 280px;
            position: absolute;
            border: #ebebeb solid 1px;
            left: 50%;
            right: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            margin-left: -256px;
            margin-top: 140px;
            display: none;
        }

        .login-title {
   
            width: 100%;
            margin: 10px 0px 0px 0px;
            text

最低0.47元/天解锁文章