原生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 GridView 实现自动计算操作代码
Mar 25 Javascript
jQuery插件开发全解析
Oct 10 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
js数组常用最重要的方法
Feb 04 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
layui实现数据分页功能
Jul 27 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 intval的测试代码发现问题
2008/07/27 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
php获取远程文件大小
2015/10/20 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
Ionic快速安装教程
2016/06/03 Javascript
js选择器全面解析
2016/06/27 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python解析树及树的遍历
2016/02/03 Python
Python socket实现简单聊天室
2018/04/01 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
心得体会开头
2014/01/01 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
车队司机自我鉴定
2014/03/02 职场文书
实验室标语
2014/06/21 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
2015年采购部工作总结
2015/04/23 职场文书
《叶问2》观后感
2015/06/15 职场文书
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis