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 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
js 实现碰撞检测的示例
Oct 28 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
委托证明的格式
2014/01/10 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS