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 相关文章推荐
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
浅析return false的正确使用
Nov 04 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
JS排序之快速排序详解
Apr 08 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
淘宝网店营销策划书
2014/01/11 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
丧事主持词
2015/07/02 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python