原生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 相关文章推荐
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
JavaScript实现登录窗体
Jun 22 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
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
股东合作协议书范本
2014/04/14 职场文书
离职保密承诺书
2014/05/28 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
工程造价专业求职信
2014/07/17 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers
python通过新建环境安装tfx的问题
2022/05/20 Python