先上效果

代码

<!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: 0px;

            padding: 0px;

        }

        a {

            color: black;

            text-decoration: none;

        }

        .one {

            width: 100%;

            text-align: center;

            height: 30px;

            font-size: 24px;

            line-height: 30px;

        }

        .login {

            display: none;

            position: fixed;

            width: 512px;

            height: 280px;

            border: #ebebeb solid 1px;

            left: 50%;

            top: 50%;

            background: #ffffff;

            box-shadow: 0px 0px 20px #ddd;

            z-index: 999;

            transform: translate(-50%,-50%);

        }

        .title {

            position: relative;

            height: 40px;

            width: 100%;

            line-height: 40px;

            font-size: 18px;

            text-align: center;

            cursor: move;

        }

        .title a{

            position: absolute;

            font-size: 12px;

            top: -15px;

            right: -15px;

            width: 30px;

            height: 30px;

            border: 1px solid #666;

            border-radius: 15px;

            text-align: center;

            line-height: 30px;

            background-color: white;

        }

        .con {

           margin-top: 20px;

        }

        .login-input input {

            float: left;

            line-height: 35px;

            height: 35px;

            width: 350px;

            border: #ebebeb solid 1px;

            text-indent: 5px;

        }

        .login-input {

            overflow: hidden;

            margin: 0px 0px 20px 0px;

        }

        .login-input label {

            float: left;

            width: 90px;

            padding-right: 10px;

            text-align: right;

            line-height: 35px;

            height: 35px;

            font-size: 14px;

        }

        .bg {

            display: none;

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0px;

            left: 0px;

            background: rgba(0, 0, 0, .3);

        }

        .button a {

            display: block;

        }

        .button {

            width: 50%;

            margin: 30px auto 0px auto;

            line-height: 40px;

            font-size: 14px;

            border: #ebebeb 1px solid;

            text-align: center;

        }

    </Style>

</head>

<body>

    <div class="one"><a href="javascript:;">点击，弹出登录框</a></div>

    <div class="login">

        <div class="title">登录会员

            <span><a href="javascript:;" id="close">关闭</a></span>

        </div>

        <div class="con">

            <div class="login-input">

                <label>用户名:</label>

                <input type="text" placeholder="请输入用户名" name="" id="name">

            </div>

            <div class="login-input">

                <label>登录密码:</label>

                <input type="text" placeholder="请输入登录密码" name="" id="code">

            </div>

            <div class="button">

                <a href="javascript:;">登录会员</a>

            </div>

        </div>

    </div>

    <div class="bg"></div>

    <script>

        var one = document.querySelector('.one');

        var login = document.querySelector('.login');

        var bg = document.querySelector('.bg');

        //点击弹出背景和登录框

        one.addEventListener('click',function(){

            login.style.display = 'block';

            bg.style.display = 'block';

        })

        //点击关闭，隐藏背景和登录框

        var close = document.querySelector('#close');

        close.addEventListener('click',function(){

            login.style.display = 'none';

            bg.style.display = 'none';

        })

        var title = document.querySelector('.title');

        //拖拽事件

        title.addEventListener('mousedown',function(e){

            //鼠标按下时，获取鼠标在盒子内的坐标

            var x = e.pageX - login.offsetLeft;

            var y = e.pageY - login.offsetTop;

            console.log(x);

            console.log(y);

            //鼠标移动时，把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是left和top值

            document.addEventListener('mousemove',move);

            function move(e){

                login.style.left = e.pageX - x +'px';//返回值不带单位

                login.style.top = e.pageY - y + 'px';

            }

            //鼠标弹起，事件移除

            document.addEventListener('mouseup',function(){

                document.removeEventListener('mousemove',move);

            })

        })

    </script>

</body>

</html>

拖动登录框 HTML+CSS+js的更多相关文章

  1. js 拟写登录页 可以拖动登录框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 动态滑动登陆框-Html+Css+Js

    动态滑动登陆框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  3. JavaScript--结合CSS变形、缩放能拖拽的登录框

    上例图: 代码块: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  4. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. HTML和CSS实现的透明登录框效果

    实现代码 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. #3使用html+css+js制作网页 制作登录网页

    #3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...

  7. phpmyadmin 4.x 版本无法看到登录框的处理

    由于个人dreamhost即将到期问题,购买了一台VPS. 配置了一个CentOS 6.4 Linux 服务器,用Nginx+php-fpm搭建的环境. 这些都是废话,下面是重点: 当搭建后配置php ...

  8. JQuery+CSS3实现封装弹出登录框效果

    原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...

  9. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

随机推荐

  1. MVVM框架理解

    MVC框架 将整个前端页面分成View,Controller,Modal,视图上发生变化,通过Controller(控件)将响应传入到Model(数据源),由数据源改变View上面的数据. 整个过程看 ...

  2. day18.进程2

    1 进程调度算法(了解) -先来先服务调度算法 -短作业优先调度算法 -时间片轮转法 -多级反馈队列 2 同步异步,阻塞非阻塞(了解) 1 同步调用:提交了以后,一直等待结果返回 2 异步调用:提交了 ...

  3. CSS 还能这样玩？奇思妙想渐变的艺术

    在之前的这篇文章 -- 一行 CSS 代码的魅力 中,我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙(也许奇怪更合适)的背景. 本文,将继续介绍背景的一些有意思的知识,利用一些极小的单位,只 ...

  4. 2021S软件工程——结对项目第三阶段

    2021S软件工程--结对项目第三阶段 2021春季软件工程(罗杰 任健) 项目地址 1020 1169 1 实践反思 1.1 问题分析 两人习惯不一致 没有具体制定时间节点 写完代码才开始" ...

  5. ThnikPHP3.2 学习链接整理

    ThnikPHP3.2 学习链接整理 ThinkPHP3.2.3 U()方法的使用总结 看云手册 ThinkPHP3.2完全开发手册 TP3.2单字母函数 TP3.x中 M方法和D方法的区别

  6. Netcat瑞士军刀的简单使用

    目录 Netcat 常用参数: 常见的用法: 端口扫描: 聊天 文件传输 反弹shell 蜜罐 Netcat Netcat 常称为 nc,拥有"瑞士军刀"的美誉.nc 小巧强悍,可 ...

  7. <JVM下篇：性能监控与调优篇>05-分析GC日志

    笔记来源:尚硅谷JVM全套教程,百万播放,全网巅峰(宋红康详解java虚拟机) 同步更新:https://gitee.com/vectorx/NOTE_JVM https://codechina.cs ...

  8. 谷歌浏览器安装Vue.js devtools

    第一步:访问谷歌商店 在之前的博客中已经谈到了这一点的实现方式 https://www.cnblogs.com/10134dz/p/13552777.html 第二步:下载Vue.js devtool ...

  9. layui的loading加载中

    var load = layer.load(1, { content: '数据加载中', shade: [0.4, '#393D49'], // time: 10 * 1000, success: f ...

  10. 修改wordpress版权信息

    修改页脚版权信息位置:找到C:\wamp64\www\wordpress\wp-content\themes\travelify\library\structure\footer-extensions ...