js实现登录拖拽窗口

本文实例为大家分享了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不是一样的值,他们分别来自不同事件

<!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>

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

(0)

相关推荐

  • js实现登录框鼠标拖拽效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i

  • js实现百度登录框鼠标拖拽效果

    以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照

  • 原生js实现弹出层登录拖拽功能

    在WEB开发过程中,总会遇到一些从未接触过的需求,总是想尽一切办法去研究,最终实现效果,在实现效果的那一刻成就感爆棚,有木有? 留言墙.弹出框等一些常见地方都有拖拽功能,方便用户体验嘛. 实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight),窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理. 之前做的比较多的留言墙效

  • js实现登录拖拽窗口

    本文实例为大家分享了js实现登录拖拽窗口的具体代码,供大家参考,具体内容如下 做这个案例的两个关键点: 1.用js将盒子在可视区域居中显示 本可以用css将盒子用定位的方式居中显示,但是采用js的方法更好些. 方法: 盒子的left值 = (可视区域的宽度 - 盒子自身的宽度)/ 2; 盒子的top值 = (可视区域的高度 - 盒子自身的高度)/ 2; 这样盒子就居中显示 2.先鼠标按下,然后鼠标在整个文档上移动时,盒子的位置跟着鼠标移动 这一点上要注意的点: 1)鼠标按下时,鼠标相对盒子X方向

  • 原生JS实现可拖拽登录框

    本文分享一个用原生JS实现的可拖拽登录框,效果如下: 实现的代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现可拖拽登录框</title> <style type="text/css"

  • JavaScript简单实现弹出拖拽窗口(一)

    本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下 需求说明:  1.点击页面按钮,弹出窗口:  2.要有半透明背景遮罩:  3.弹出窗口圆角,窗口半透明,但内容不透明:带阴影:  4.窗口可拖动:  5.拖动停止之后,滚动页面时窗口位置不动:  6.可以使用jQuery:  7.有关闭按钮:  进一步功能具体描述:  点按钮,会有一个可以拖拽的浮层出来.  有一个背景遮罩,支持标题栏的拖拽,在标题栏以外,在标题栏区域之外的区域拖拽是没有效果的,拖拽功能限

  • JavaScript简单实现弹出拖拽窗口(二)

    接上文JavaScript简单实现弹出拖拽窗口(一)进行学习.  下面开始具体分析代码部分:  首先我们先确认下结构:  悬浮窗口:初始不可见.包括标题栏和内容栏,标题栏内有标题和关闭按钮.  遮罩层:初始不可见.用于设置弹出悬浮窗口时的半透明背景,  按钮:用于点击弹出悬浮窗口. 下面进行详细解释  1.要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute):    /*登录浮层组件*/ .popup{ display:none; /*初始隐藏*/ widt

  • js实现简易拖拽的示例

    简易拖拽 目录 代码实例 代码解析 scrollWidth,clientWidth,offsetWidth的区别 offsetX,clientX,pageX的辨析 下载源码链接 代码实例 <div id="box" style="background: #334;width: 100px;height: 100px;position: absolute;cursor: move;"></div> (function () { var drag

  • 纯JS实现可拖拽表单的简单实例

    因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然

  • Dropzone.js实现文件拖拽上传功能(附源码下载)

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示      源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&

  • js实现鼠标拖拽多选功能示例

    最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&

  • jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

    本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d

  • JS实现基于拖拽改变物体大小的方法

    本文实例讲述了JS实现基于拖拽改变物体大小的方法.分享给大家供大家参考,具体如下: 拖拽改变物体大小功能:拖拽黄色小div来改变绿色大div的宽和高 主要实现由三大步: 1. 通过id获取到大小两个div 2. 给小div添加onmousedown事件 3. 在onmousedown事件给document添加onmousemove和onmouseup事件 由分析图可知,我们只需要在拖拽的时候,获取到物体不断增加的宽度值,问题就解决了 <div id="panel"> <

随机推荐