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


Posted in Javascript onMarch 09, 2017

效果图:

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?image&quality=80&size=b9999_10000&sec=1488778794834&di=e97c96dfe7860297d1968c30adc862a2&imgtype=0&src=http%3A%2F%2Fpic1.5442.com%3A82%2F2015%2F0409%2F01%2F15.jpg%2521960.jpg") no-repeat top center #ffffff;
  background-size: 100%;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-family: "微软雅黑", sans-serif;
 }
 .ui-dialog {
  width: 380px;
  position: absolute;
  z-index: 9000;
  top: 100px;
  left: 100px;
  border: 1px solid #d5d5d5;
  background-color: #ffffff;
  /*display: none;*/
 }
 .ui-dialog-title {
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  color: #535353;
  font-size: 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #efefef;
  cursor: move;
 }
 .ui-dialog-title-closebutton {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  right: 20px;
  color: #000;
  text-decoration: unset;
 }
 .ui-dialog-title-closebutton:hover {
  color: #4ca8ff;
 }
 .ui-dialog-content {
  padding: 15px 20px;
 }
 .ui-dialog-pt15 {
  padding-top: 15px;
 }
 .ui-dialog-l40 {
  height: 40px;
  line-height: 40px;
  text-align: right;
 }
 .ui-dialog-input {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  border:1px solid #d5d5d5;
  font-size: 16px;
  color: #c1c1c1;
  text-indent: 25px;
  outline: none;
 }
 .ui-dialog-input-username {
  background: url("images/input_username.png") no-repeat 2px;
 }
 .ui-dialog-input-password {
  background: url("images/input_password.png") no-repeat 2px;
 }
 .ui-dialog-submit {
  width: 100%;
  height: 50px;
  background: #3b7ae3;
  border: none;
  font-size: 16px;
  color: #ffffff;
  outline: none;
  text-decoration: none;
  display: block;
  text-align: center;
  line-height: 50px;
 }
 .ui-dialog-submit:hover {
  background: #3f81b0;
 }
 .ui-mask {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8000;
  display: none;
 }
 .link {
  text-align: right;
  line-height: 20px;
  padding-right: 40px;
 }
 </style>
</head>
<body>
 <div class="ui-dialog" id="dialog">
 <div class="ui-dialog-title" id="dialogTitle">
  登录
  <!-- 右上角的关闭按钮 -->
  <a href="javascript:hideDialog();" rel="external nofollow" class="ui-dialog-title-closebutton">X</a>
 </div>
 <div class="ui-dialog-content">
  <div class="ui-dialog-l40 ui-dialog-pt15">
  <input class="ui-dialog-input ui-dialog-input-username" type="input" placeholder="手机/邮箱/用户名" />
  </div>
  <div class="ui-dialog-l40 ui-dialog-pt15">
  <input class="ui-dialog-input ui-dialog-input-password" type="input" placeholder="密码" />
  </div>
  <div class="ui-dialog-l40">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘记密码</a>
  </div>
  <div>
  <a class="ui-dialog-submit" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a>
  </div>
  <div class="ui-dialog-l40">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >立即注册</a>
  </div>
 </div>
 </div>
 <div class="ui-mask" id="mask"></div>
 <div class="link">
 <a href="javascript:showDialog();" rel="external nofollow" style=" text-decoration: unset;color: #4ca8ff">登录</a>
 </div>
 <script type="text/javascript">
 // 获取元素对象
 function g(id) {
  return document.getElementById(id);
 }
 // 自动居中函数 -- 登录浮层
 // el {Element}
 function autoCenter(el) {
  // 获得可视区域的宽和高
  var bodyW = document.documentElement.clientWidth;
  var bodyH = document.documentElement.clientHeight;
  // 获得元素 el 的宽和高
  var elW = el.offsetWidth;
  var elH = el.offsetHeight;
  // 设置元素的 style 样式
  el.style.left = (bodyW - elW) / 2 + 'px';
  el.style.top = (bodyH - elH) / 2 + 'px';
 }
 // 扩展元素到整个可视区域 -- 遮罩层
 // el {Element}
 function fillToBody(el) {
  // 将元素的宽和高设置的和可视区域一样
  el.style.width = document.documentElement.clientWidth + 'px';
  el.style.height = document.documentElement.clientHeight + 'px';
 }
 // 定义全局变量
 var mouseOffsetX = 0;
 var mouseOffsetY = 0;
 var isDragging = false;
 // 鼠标事件1 -- 在标题栏上按下
 // 计算鼠标相对拖拽元素的的左上角的坐标, 并且标记元素为可拖动
 g('dialogTitle').addEventListener('mousedown', function(e) {
  var e = e || window.event;
  // 用鼠标按下时的坐标减去 dialog 的左上角坐标
  mouseOffsetX = e.pageX - g('dialog').offsetLeft;
  mouseOffsetY = e.pageY - g('dialog').offsetTop;
  isDragging = true;
 });
 // 鼠标事件2 -- 鼠标移动
 document.onmousemove = function(e) {
  var e = e || window.event;
  // 鼠标当前位置
  var mouseX = e.pageX;
  var mouseY = e.pageY;
  // 鼠标从单击时至当前时刻移动的距离
  var moveX = 0;
  var moveY = 0;
  if (isDragging === true) {
  moveX = mouseX - mouseOffsetX;
  moveY = mouseY - mouseOffsetY;
  // 范围限定
  // moveX > 0 且 moveX < (页面最大宽度 - 浮层宽度)
  // moveY > 0 且 moveY < (页面最大宽度 - 浮层高度)
  var pageWidth = document.documentElement.clientWidth;
  var pageHeight = document.documentElement.clientHeight;
  // 登录浮层的宽、高
  var dialogWidth = g('dialog').offsetWidth;
  var dialogHeight = g('dialog').offsetHeight;
  var maxX = pageWidth - dialogWidth;
  var maxY = pageHeight - dialogHeight;
  moveX = Math.min(maxX, Math.max(0, moveX));
  moveY = Math.min(maxY, Math.max(0, moveY));
  g('dialog').style.left = moveX + 'px';
  g('dialog').style.top = moveY + 'px';
  }
 };
 // 鼠标事件3 -- 鼠标松开
 document.onmouseup = function() {
  isDragging = false;
 };
 // 展现登录浮层
 function showDialog() {
  g('dialog').style.display = 'block';
  g('mask').style.display = 'block';
  autoCenter(g('dialog'));
  fillToBody(g('mask'));
 }
 // 隐藏登录浮层
 function hideDialog() {
  g('dialog').style.display = 'none';
  g('mask').style.display = 'none';
 }
 window.onresize = function() {
  autoCenter(g('dialog'));
  fillToBody(g('mask'));
 };
 showDialog();
 autoCenter(g('dialog'));
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
js常用代码段收集
Oct 28 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 #Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 #Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 #Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 #Javascript
微信小程序 五星评价功能的实现
Mar 09 #Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 #Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 #Javascript
You might like
高亮度显示php源代码
2006/10/09 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
Jquery easyUI 更新行示例
2014/03/06 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
美国购车网站:TrueCar
2016/10/19 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
三项教育活动实施方案
2014/03/30 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
跳槽求职信范文
2014/05/26 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
2016年情人节广告语
2016/01/28 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
Python编写冷笑话生成器
2022/04/20 Python
Redis基本数据类型String常用操作命令
2022/06/01 Redis
MySQL添加索引特点及优化问题
2022/07/23 MySQL