js实现登录拖拽窗口


Posted in Javascript onFebruary 10, 2020

本文实例为大家分享了js实现登录拖拽窗口的具体代码,供大家参考,具体内容如下

做这个案例的两个关键点:

1、用js将盒子在可视区域居中显示

本可以用css将盒子用定位的方式居中显示,但是采用js的方法更好些。
方法:
盒子的left值 = (可视区域的宽度 - 盒子自身的宽度)/ 2;
盒子的top值 = (可视区域的高度 - 盒子自身的高度)/ 2;
这样盒子就居中显示

2、先鼠标按下,然后鼠标在整个文档上移动时,盒子的位置跟着鼠标移动

这一点上要注意的点:

1)鼠标按下时,鼠标相对盒子X方向的位置 = event.clienX- 盒子的offsetLeft
鼠标相对盒子Y方向的位置 = event.clientY - 盒子的offsetTop ;

2)鼠标在移动时,盒子的left值 = event.clientX - 鼠标相对盒子X方向的位置
盒子的top值 = event.clientY - 鼠标相对盒子Y方向的位置

注意 1),2)中的event.clientX/clientY不是一样的值,他们分别来自不同事件

js实现登录拖拽窗口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    button {
      width: 80px;
      height: 30px;
      display: block;
      margin: 0 auto;
      background-color:#3b7ae3;
      border-style: none;
      border-radius: 5px;
      color: #ffffff;
      cursor: pointer;
    }
    .mask {
      position: absolute;
      top:0;
      width: 100%;
      height: 1000px;
      background-color:black;
      opacity: 0.75;
      z-index: 99;
    }
    .login {
      width: 350px;
      height: auto;
      border: 1px solid #fff;
      position: absolute;
      top:0;
      left: 0;
      z-index: 1000;
    }
    .title {
      width:330px;
      height: 50px;
      padding-left: 20px;
      line-height: 50px;
      background-color: #eee;
      position: relative;
      cursor: move;
    }
    span {
      position: absolute;
      right:10px;
      font-size: 30px;
      font-weight: 300;
      cursor: pointer;
    }
    .current {
      padding: 10px 15px;
      background-color: #fff;
    }
    .user,
    .password{
      margin-bottom: 10px;
    }
    .pt {
      width:308px;
      height: 40px;
      padding-left: 10px;
    }
    .submit {
      width: 320px;
      height: 48px;
      background-color:#3b7ae3;
      color: #fff;
      font-size: 16px;
      border-style: none;
      cursor: pointer;
    }
  </style>
  <script>
    window.onload = function(){
      // 获取元素
      function $(id) {return document.getElementById(id);}
      // 获得可视区域的大小
      var clientwidth = document.documentElement.clientWidth || document.body.clientWidth;
      var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      // 点击登录按钮
      $("btn").onclick = function(){
        // 创建mask
        var mask = document.createElement("div");
        mask.className = "mask";
        // mask的高度等于可视化区域的高度
        mask.style.height = clientHeight + "px";
        document.body.appendChild(mask);
        // 创建login
        var login = document.createElement("div");
        login.className = "login";
        login.id = "_login";
        login.innerHTML = '<div class="title" id="_title"> 登录百度账号 '+' <span id="close">×</span>'+' </div>'+' <div class="current">'+
        '<div class="user">'+' <input type="text" class="pt" placeholder="手机/邮箱/用户名">'+
        '</div>'+'<div class="password">'+'<input type="text" class="pt" placeholder="请输入密码">'+
        '</div>'+'<div>'+' <input type="button" class="submit" value="登录">'+'</div>';
        document.body.appendChild(login);

        // 设置login的位置垂直居中 
        login.style.left= (clientwidth - login.offsetWidth)/2 + "px";
        login.style.top = (clientHeight - login.offsetHeight)/2 + "px";
        
        // 当窗口改变大小时,login仍然垂直居中显示
        window.onresize = function(){
          if(window.innerWidth != null) // ie9+及新的浏览器
          {
            clientwidth = window.innerWidth;
            clientHeight = window.innerHeight;
          }
          else if(document.compatMode == "CSS1Compat")// 标准模式
          {
            clientwidth = document.documentElement.clientX;
            clientHeight = document.documentElement.clientY;
          }
          else 
          {
            clientwidth = document.body.clientX;
            clientHeight = document.body.clientY;
          }
        login.style.left= (clientwidth - login.offsetWidth)/2 + "px";
        login.style.top = (clientHeight - login.offsetHeight)/2 + "px";
        mask.style.height = clientHeight + "px";
        }
        // 鼠标按下title实现拖拽
        $("_title").onmousedown = function(event){
          var event = event || window.event;
          // 鼠标相对盒子的位置
          var moveX = event.clientX - login.offsetLeft;
          var moveY = event.clientY - login.offsetTop;
          document.onmousemove = function(event){
          var event = event || window.event;
          // 鼠标移动时的位置
          var clientX1 = event.clientX;
          var clientY1 = event.clientY;
          // 盒子的偏移量 = 当前鼠标的位置 - 鼠标按下时相对盒子的位置
          var loginX = clientX1 - moveX;
          var loginY = clientY1 - moveY;
          // 判断login的位置是否超过可视区域
          if(loginX <= 0)
          {
            loginX = 0;
          }
          else if(loginX >= clientwidth - $("_login").offsetWidth)
          {
            loginX = clientwidth - $("_login").offsetWidth;
          }
          if(loginY <= 0)
          {
            loginY = 0;
          }
          else if(loginY >= clientHeight - $("_login").offsetHeight)
          {
            loginY = clientHeight - $("_login").offsetHeight;
          }
          $("_login").style.left = loginX + "px";
          $("_login").style.top = loginY + "px";
        }
        document.onmouseup = function(){
          document.onmousemove = null;
      }
      // 点击叉号关闭
      $("close").onclick = function(){
        document.body.removeChild(mask);
        document.body.removeChild(login);
      }
    }
    }
    }
  </script>
</head>
<body>
  <button id="btn">登录</button>
  <!-- <div class="mask" id="_mask"></div>
  <div class="login" id="_login">
    <div class="title" id="_title">
      登录百度账号
      <span id="close">×</span>
    </div>
    <div class="current">
      <div class="user">
        <input type="text" class="pt" placeholder="手机/邮箱/用户名">
      </div>
      <div class="password">
        <input type="text" class="pt" placeholder="请输入密码">
      </div>  
      <div >
        <input type="button" class="submit" value="登录">
      </div>    
    </div> -->
    
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
JavaScript的parseInt 进制问题
May 07 Javascript
event对象的方法 兼容多浏览器
Jun 27 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
jQuery常用选择器详解
Jul 17 jQuery
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 #Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 #Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 #Javascript
webpack打包优化的几个方法总结
Feb 10 #Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 #Javascript
node.js制作一个简单的登录拦截器
Feb 10 #Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 #Javascript
You might like
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
MySQL相关说明
2007/01/15 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
JS父页面与子页面相互传值方法
2014/03/05 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
js实现简单的验证码
2015/12/25 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
python实现备份目录的方法
2015/08/03 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
一文读懂Python 枚举
2020/08/25 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
关于赌博的检讨书
2014/01/08 职场文书
大学学习生活感言
2014/01/18 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers