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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
js 学习笔记(三)
2009/12/29 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
简单分析js中的this的原理
2019/08/31 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python中给List添加元素的4种方法分享
2014/11/28 Python
python字符串的方法与操作大全
2018/01/30 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
大学生第一学年自我鉴定2015
2014/09/28 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
高中班主任寄语
2019/06/21 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
Python Django模型详解
2021/10/05 Python
Java8中Stream的一些神操作
2021/11/02 Java/Android