先上效果

代码

<!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. Unix ls UVA - 400

      The computer company you work for is introducing a brand new computer line and is developing a new ...

  2. Day11_58_增强for循环

    增强for循环 * 语法 : for(数据类型 变量名:数组名/集合名) * 集合如果要使用增强for循环需要先使用泛型来确定元素类型,如果没有使用泛型就使用foreach,那么变量类型设置为Obje ...

  3. 7.If语句

    if单选择结构 语法: if(布尔表达式){ //如果布尔表达式为true将执行的语句 } 例: import java.util.Scanner; public class IfDemo { pub ...

  4. Centos7 安装RabbitMQ及配置（亲测）

    Rabbit MQ Linux 安装 Centos7 如果是重装先把erlang和rabbitmq卸载干净,不然还会重装失败<rabbitmq和erlang卸载> 记得删除/var/lib ...

  5. 【SpringBoot】Springboot2.x整合SpringSecurity

    一.Spring Security是什么?有什么作用(核心作用)?以及如何阅读本篇文章 1.是什么 Spring Security是Spring家族的一个强大的安全框架,与Springboot整合的比 ...

  6. hdu4642博弈（矩阵）

    题意:       给一个01矩阵,每次可以选择1的格子,选择之后以他为左上角的矩阵全都取反,两个人轮班取,不能取的人输. 思路:        博弈的题目,结论是右下角是0就输,1就赢,原因可以这么 ...

  7. UVA11991第k次出现的v的下标

    题意:      给你一个有n个数的数字序列,然后有m组询问,每组询问是问第k次出现的v在序列里的小标是多少? 思路:      简单题目,直接开个二维的容器就行了,标记出现次数可以开个数组或者是一维 ...

  8. node-OS&Domain&Net&Path

    OS--------------------------------------------- Node.js os 模块提供了一些基本的系统操作函数. var os = require(" ...

  9. Idea创建Maven Web项目的web.xml版本问题

    问题描述:创建Maven Web项目时,选择MavenWebapp模板时,自动生成的web.xml文件版本为1.4,如图所示 如何才能修改为常用的4.0版本的xml文件呢? 这个文件是从Maven仓库 ...

  10. MFC对话框不能使用菜单更新宏ON_UPDATE_COMMAND_UI

    菜单更新宏的原理 更新处理宏的工作原理是基于框架窗口类的.MFC中对话框菜单更新宏的原理是:当我们使用从CFrameWnd框架窗口类中派生的类创建窗口时,当我们单击菜单且菜单还未弹出前会产生WM_IN ...