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


Posted in Javascript onDecember 05, 2016

在WEB开发过程中,总会遇到一些从未接触过的需求,总是想尽一切办法去研究,最终实现效果,在实现效果的那一刻成就感爆棚,有木有?

留言墙、弹出框等一些常见地方都有拖拽功能,方便用户体验嘛。

实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight),窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理。

之前做的比较多的留言墙效果时写过的,这当时做的笔记,现在来整理整理。

JavaScript代码:

window.onload = function() {
 var btn = document.getElementsByClassName('login')[0]
 var close = document.getElementById('close');
 var login = document.getElementById('login');
 var top = (document.documentElement.clientHeight - 250) / 2; //top值等于(获取页面可视区域的宽度 - 登录框的高度) / 2
 var left = (document.documentElement.clientWidth - 350) / 2;
 var open = document.getElementById('screen');
 btn.onclick = function() {
  login.style.display = 'block';
  login.style.left = left + 'px';
  login.style.top = top + 'px';
  open.style.display = 'block';
  open.style.width = getInner().width + 'px'; //弹出层的宽度等于可视窗口的宽度
  open.style.height = getInner().height + 'px';
 }
 close.onclick = function() {
  login.style.display = 'none';
  open.style.display = 'none';
 }
 window.onresize = function() {
   var top = (getInner().height - 250) / 2;
   var left = (getInner().width - 350) / 2;
   login.style.left = left + 'px';
   login.style.top = top + 'px';
  }
  //跨浏览器获取可视窗口
 function getInner() {
  if (window.innerWidth != 'undefined') { //IE 不支持返回undefind
   return {
    width: window.innerWidth,
    height: window.innerHeight
   }
  } else {
   return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
   }
  }
 }
 //实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown
 //clientX ,clientY 时鼠标指针相对于整个屏幕的坐标距离
 //offsetLeft, offsetTop 获取当前元素相对于父元素的位置,在这里,父元素是document
 login.onmousedown = function(e) {
   stop(e); //阻止事件默认行为
   var e = e || window.event;
   var oLeft = e.clientX - login.offsetLeft; //login.offsetLeft 获取盒子边框到浏览器左边框的距离
   var otop = e.clientY - login.offsetTop;
   document.onmousemove = function(e) { //移动的是整体的doucment
    var e = e || window.event;
    //不能移出可视区域
    var left = e.clientX - oLeft;
    var top = e.clientY - otop;
    //左右
    if (left < 0) { //如果盒子距左边的距离小于零,即超出
     left = 0;
    } else if (left > getInner().width - login.offsetWidth) { //可视区域的长度,减去盒子的长度 offsetWidth
     left = getInner().width - login.offsetWidth;
    }
    //上下
    if (top < 0) {
     top = 0;
    } else if (top > getInner().height - login.offsetHeight) {
     top = getInner().height - login.offsetHeight;
    }
    login.style.left = left + 'px';
    login.style.top = top + 'px';
   }
   document.onmouseup = function() {
    document.onmousemove = null;
    document.onmouseup = null;
   }
  }
  //取消默认行为
 function stop(e) {
  var e = e || window.event;
  if (typeof e.preventDefault != 'undefined') {
   e.preventDefault(); //W3C
  } else {
   e.returnValue = false; //IE阻止事件默认行为
  }
 }
}

HTML代码:

<div id="header">
 <div class="logo"><img src="images/logo.gif" alt="" /></div>
 <div class="member">个人中心
  <ul class="list">
   <li><a href="###">设置</a></li>
   <li><a href="###">换肤</a></li>
   <li><a href="###">帮助</a></li>
   <li><a href="###">退出</a></li>
  </ul>
 </div>
 <div class="login">登录</div>
</div>

<div id="login">
 <h2><img src="images/close.png" alt="" class="close" id="close" />登录</h2>
 <div class="user">用户名<input type="text" name="user" class="text" /></div>
 <div class="pass">密  码 
  <input type="password" name="pass" class="text" /></div>
 <div class="button">
  <input type="button" class="submit" value="" /></div>
 <div class="other">注册新用户 | 忘记密码</div>
</div>
<div id="screen"></div>
<script type="text/javascript" src="demo.js"></script>

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

Javascript 相关文章推荐
在JavaScript中typeof的用途介绍
Apr 11 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 #Javascript
原生js编写基于面向对象的分页组件
Dec 05 #Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 #Javascript
浅谈Node.js:Buffer模块
Dec 05 #Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 #Javascript
详解jquery easyui之datagrid使用参考
Dec 05 #Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
聊天室php&amp;mysql(二)
2006/10/09 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
python发送邮件实例分享
2017/07/28 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
Python3读写ini配置文件的示例
2020/11/06 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
平面设计师的工作职责
2013/11/21 职场文书
大学军训感想
2014/02/12 职场文书
总会计师岗位职责
2014/02/19 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
推广普通话标语
2014/06/27 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书