<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></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 {

            display: none;

            width: 512px;

            height: 280px;

            position: fixed;

            border: #ebebeb solid 1px;

            left: 50%;

            top: 50%;

            background: #ffffff;

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

            z-index: 9999;

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

        }

        .login-title {

            width: 100%;

            margin: 10px 0px 0px 0px;

            text-align: center;

            line-height: 40px;

            height: 40px;

            font-size: 18px;

            position: relative;

            cursor: move;

        }

        .login-input-content {

            margin-top: 20px;

        }

        .login-button {

            width: 50%;

            margin: 30px auto 0px auto;

            line-height: 40px;

            font-size: 14px;

            border: #ebebeb 1px solid;

            text-align: center;

        }

        .login-bg {

            display: none;

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0px;

            left: 0px;

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

        }

        a {

            text-decoration: none;

            color: #000000;

        }

        .login-button a {

            display: block;

        }

        .login-input input.list-input {

            float: left;

            line-height: 35px;

            height: 35px;

            width: 350px;

            border: #ebebeb 1px solid;

            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;

        }

        .login-title span {

            position: absolute;

            font-size: 12px;

            right: -20px;

            top: -30px;

            background: #ffffff;

            border: #ebebeb solid 1px;

            width: 40px;

            height: 40px;

            border-radius: 20px;

        }

    </style>

</head>

<body>

    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>

    <div id="login" class="login">

        <div id="title" class="login-title">登录会员

            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>

        </div>

        <div class="login-input-content">

            <div class="login-input">

                <label>用户名：</label>

                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">

            </div>

            <div class="login-input">

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

                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">

            </div>

        </div>

        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>

    </div>

    <!-- 遮盖层 -->

    <div id="bg" class="login-bg"></div>

  <script>

      //获取动态元素

      var login_header= document.querySelector('.login-header');

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

      var login_bg    = document.querySelector('#bg')

      var login_close = document.querySelector('#closeBtn')

      var login_title = document.querySelector('#title')

      //点击获取登录页面

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

          login.style.display= 'block';

          login_bg.style.display = 'block';

      })

      //点击关闭登录页面

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

          login.style.display= 'none';

          login_bg.style.display = 'none';

      })

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

          //鼠标在盒子内部的坐标

          var x = e.pageX - login.offsetLeft;

          var y = e.pageY - login.offsetTop;

          //动态获取盒子的坐标

          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>

js 拟写登录页 可以拖动登录框的更多相关文章

  1. Jetpack Compose学习(5)——从登录页美化开始学习布局组件使用

    原文:Jetpack Compose学习(5)--从登录页美化开始学习布局组件使用 | Stars-One的杂货小窝 本篇主要讲解常用的布局,会与原生Android的布局控件进行对比说明,请确保了解A ...

  2. 拖动登录框 HTML+CSS+js

    先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  4. JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效 ...

  5. SSM登录跳转到登录页，登录页不能加载js和样式

    SSM登录跳转到登录页,登录页不能加载js和样式选用jsppage添加根路径. <% String rootPath = request.getContextPath(); %> < ...

  6. 小程序登录时如何获取input框中的内容

    最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <in ...

  7. session过期，登录页被内嵌iframe的解决方案

    在登录页的js加上: if(window !=top){ top.location.href = location.href; } 就可以完美解决这个问题!

  8. 后台跳转到登录页嵌套在iframe的问题（MVC例）

    //首页 public ActionResult Index() { if (!Request.IsAuthenticated) //判断权限,没有登录就跳回登录页 {string url = Url ...

  9. php使用 _before_index() 来实现访问页面前,判断登录

    C:\wamp\www\DEVOPS\Home\Lib\Action: <?php class IndexAction extends Action { function index(){ $t ...

随机推荐

  1. 【C/C++】金币

    做了一下去年的题目,今年看起来就没这么难了 从上到下的可以从下到上考虑,会简单很多,dp入门 题目 金币 小招在玩一款游戏,在一个N层高的金字塔上,以金字塔顶为第一层,第i层有i个落点,每个落点有若干 ...

  2. Apache APISIX 的安装和配置请求转发url匹配

    安装apisix套件 创建一个apisix文件夹,在apisix文件夹下再创建一个etcd_data文件夹,用来持久化etcd的数据 在apisix文件夹下 新建3个文件 config.yaml,  ...

  3. 程序员Meme 第00期

  4. 编译工具grdle部署

    目录 一.简介 二.部署 三.测试 一.简介 Gradle 是以 Groovy 语言为基础,面向Java应用为主.基于DSL(领域特定语言)语法的自动化构建工具.在github上,gradle项目很多 ...

  5. 韩顺平Java（持续更新中）

    原创上课笔记,转载请注明出处 第一章 面向对象编程(中级部分) PDF为主 1.1 IDEA 删除当前行,ctrl+y 复制当前行,ctrl+d 补全代码,alt+/ 添加或者取消注释,ctrl+/ ...

  6. CF1139A Even Substrings 题解

    Content 有一个长度为 \(n\) 的数字串 \(s\),试求出代表偶数的子串个数. 数据范围:\(1\leqslant n\leqslant 65000\),\(s\) 仅包含数字 \(1\s ...

  7. LuoguP7375 [COCI2018-2019#5] Jarvis 题解

    Content 有 \(n\) 架无人机,每架无人机都有一个当前属性值 \(a_i\) 和出战属性值 \(b_i\).你可以给每架无人机的当前属性值同时加一个数 \(x\)(但只能做一次),使得能够出 ...

  8. Spring Tool Suite(STS)基本安装配置

    下载jar包:https://spring.io/tools 下载完成后 打开所在文件夹 执行命令行 jar -jar  下载的jar包文件名 然后会自动解压 双击打开软件 配置主面板窗口 配置好之后 ...

  9. 优化MySQL占用内存过高

    打开mysql 的配置文件  my.cnf 查找方式:https://www.cnblogs.com/pxblog/p/13701211.html 在[mysqld]后面修改或添加 # The max ...

  10. 【LeetCode】1120. Maximum Average Subtree 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS 日期 题目地址:https://leetcod ...