web第三次作业

id="article_content" class="article_content clearfix"> id="content_views" class="markdown_views prism-atom-one-dark">

作业要求

请使用JS实一个网页中登录窗口的显示/隐藏，页面中拖动移动，并且添加了边界判断的网页效果

作业内容

代码内容

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录窗口拖动title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            background-color: #f2f1f2;
        }

        header {
            width: 1200px;
            height: 50px;
            background-color: #fff;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header div:nth-of-type(2) {
            display: flex;
            gap: 20px;
            cursor: pointer;
        }

        header div:nth-of-type(2)span:hover {
            font-weight: bolder;
            color: red;
        }

        .login-box {
            display: none;
            overflow: hidden;
            width: 300px;
            height: 200px;
            background-color: #fff;
            border: solid 1px orangered;
            border-radius: 8px;
            box-shadow: rgba(255, 0, 0, 0.5) 5px 5px 5px;
            position: absolute;
            left: 1150px;
            top: 50px;
        }

        .login-box .header {
            height: 40px;
            background-color: orangered;
            display: flex;

            justify-content: space-between;
            align-items: center;
            color: white;
            cursor: pointer;
            padding: 0 10px;
        }
    style>
head>

<body>
    <div class="container">
        <header>
            <div>
                <span>欢迎访问OPENLAB EDUspan>
            div>
            <div>
                <span id="login">登录span>
                <span id="register">注册span>
            div>
            <div class="login-box" id="login-box">
                <div class="header" id="header">
                    <span>会员登录span>
                    <span id="close">[关闭]span>
                div>
            div>
        header>
    div>
    <script>
        // 获取登录按钮
        let _login = document.getElementById("login");
        let _login_box = document.getElementById("login-box");
        // 登录按钮添加事件
        _login.onclick = function () {
            // 显示弹窗
            _login_box.style.display = "block";
        }

        // 获取关闭按钮
        let _close = document.getElementById("close");
        _close.onclick = function () {
            // 隐藏弹窗
            _login_box.style.display = "none";
        }

        // 获取登录窗口标题
        let _header = document.getElementById("header");

        // 文档中添加鼠标按下事件
        document.onmousedown = function (event) {
            // 获取鼠标指针在标题上的偏移量(事件函数默认参数：事件对象)
            let offsetX = event.offsetX;
            let offsetY = event.offsetY;

            // 给窗口标题，添加鼠标移动的事件
            _header.onmousemove = function (event2) {
                // 鼠标移动，获取新的坐标
                let mouseX = event2.clientX;
                let mouseY = event2.clientY;

                // 计算登录窗口坐标
                let loginX = mouseX - offsetX;
                let loginY = mouseY - offsetY;

                // ----------------- 边界判断
                // 左边界
                if (loginX <= 0) {
                    loginX = 0;
                }
                // 上边界
                if (loginY <= 0) {
                    loginY = 0;
                }
                // 右边界
                let iw = window.innerWidth; // 浏览器窗口宽度
                let lw = getComputedStyle(_login_box).width; // 登录窗宽度
                lw = parseInt(lw); // 转换数据类型
                if (loginX >= (iw - lw)) {
                    loginX = iw - lw;
                }
                // 下边界
                let ih = window.innerHeight;
                let lh = getComputedStyle(_login_box).height; // 登录窗高度
                lh = parseInt(lh); // 转换数据类型
                if (loginY >= (ih - lh)) {
                    loginY = ih - lh;
                }

                // 给登录窗口设置样式
                _login_box.style.left = loginX + "px";
                _login_box.style.top = loginY + "px";

            }

        }

        // 鼠标按键抬起事件：什么都不做
        document.onmouseup = function () {
            // 清除了标题上的鼠标移动事件 - 什么都不做
            _header.onmousemove = null;

        }

    script>
body>

html>
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172

实现效果

在这里插入图片描述

>>
注：本文转载自blog.csdn.net的小猫会后空翻的文章"https://blog.csdn.net/m0_75204126/article/details/145664493"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！