先上效果

代码

<!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. JFX11+Maven+IDEA 发布跨平台应用的完美解决方案

    1 概述 前几天写了两篇关于JFX+IDEA打包跨平台应用的文章,这篇是使用IDEA自带功能打包的,这篇是使用Maven进行打包的,但是效果不太满意,因为从JDK9开始实现模块化,同时JFX部分从JD ...

  2. 8. vue给标签动态绑定title

    在利用vue开发时,如果标签宽度比较小,我们需要利用overflow:hidden;text-overflow:ellipsis;white-space: nowrap;对其进行隐藏,但隐藏后如何读其 ...

  3. 什么？女神发了朋友圈，快来围观之Java设计模式：观察者模式

    目录 观察者模式 示例 定义 设计原则 意图 主要解决问题 何时使用 优缺点 女神和追求者的故事 Java中的实现 观察者模式 示例 微信公众号,关注就可以收到推送的消息,取消关注就不会收到 定义 定 ...

  4. gateway调用Fegin失败问题解决

    起因 新项目用的是springcloud2.0,网关用gateway替换了zuul. gateway动态路由跟zuul有本质上的区别.这就涉及到webflux这一套大东东了.简单来说,gateway是 ...

  5. 逆向工程第005篇：跨越CM4验证机制的鸿沟（下）

    一.前言 本文是逆向分析CM4系列的最后一篇,我会将该游戏的序列号验证机制分析完毕,进而编写出注册码生成器. 二.分析第二个验证循环 延续上一篇文章的内容,来到如下代码处: 图1 上述代码并没有特别需 ...

  6. LAMP环境搭建一个Discuz论坛

    LAMP是Linux+Apache+Mysql/MariaDB+Perl/PHP/Python的简称.一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立的程序,但是因为常被放在一起使用,拥有 ...

  7. 安装全局消息钩子实现dll窗体程序注入

    说明{      通过设置全局消息钩子来实现dll注入,然后窗体有相关消息请求的时候就会自动加载注入dll, 然后在入口处做处理就可以了.注入方式简单很多,比代码注入和lsp等注入都简单,就不解释了. ...

  8. Day009 冒泡排序

    冒泡排序 冒泡排序无疑是最为出名的排序算法之一,总共有八大排序! 冒泡排序的代码还是相当简单的,两层循环,外层冒泡轮数,里层依次比较,江湖中人人尽皆知. 我们看到嵌套循环,应该立马就可以得出这个算法的 ...

  9. layui select 动态赋值

    出现问题 赋值完成后页面不显示,没有效果 发现问题 赋值完成后需要重新渲染select 解决问题 form.render('select');

  10. Docker搭建开发环境（Nginx+MySQL+PHP）

    注意事项 1.像MySQL配置文件.Nginx配置文件.网站根目录这种比较经常操作的需要先使用 docker cp 将文件从容器里复制到主机目录,docker run的时候直接挂载目录就可以了 2.d ...