原生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 相关文章推荐
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
node.js入门教程
Jun 01 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
JS删除数组指定值常用方法详解
Jun 04 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
php判断ip黑名单程序代码实例
2014/02/24 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
jQuery 表格工具集
2010/04/25 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python3 Random模块代码详解
2017/12/04 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
装修协议书范本
2014/04/21 职场文书
工地安全标语
2014/06/07 职场文书
经营目标管理责任书
2014/07/25 职场文书
事业单位年度考核评语
2014/12/31 职场文书
小孩不笨观后感
2015/06/03 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
Nginx反向代理学习实例教程
2021/10/24 Servers
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技