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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
从零开始学习搭建React脚手架项目
Aug 23 Javascript
js实现鼠标点击飘爱心效果
Aug 19 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
基于PHP中的常用函数回顾
2013/07/11 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
window.onload使用指南
2015/09/13 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
python简单实现旋转图片的方法
2015/05/30 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
会计专业毕业生自荐书
2014/06/25 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
公司借款担保书
2015/09/22 职场文书