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下给元素添加事件的方法与代码
Aug 13 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 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
文件上传类
2006/10/09 PHP
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
NET程序员上机面试题
2015/05/23 面试题
实习医生自我评价
2013/09/22 职场文书
求职简历自荐信范文
2013/10/21 职场文书
大学生活自我评价
2014/04/09 职场文书
旷课检讨书范文
2015/01/27 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
MySQL的Query Cache图文详解
2021/07/01 MySQL