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

2024-10-12 08:18:04

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

jsMind通过鼠标拖拽的方式调整节点位置

jsMind是一个纯javascript实现的思维导图类库,基于html5的canvas实现,以BSD协议开源. 提供了思维导图的显示,编辑等功能,支持freemind数据格式,有丰富的开发接口可供使用,具体功能请访问软件主页进一步了解. jsMind 现已支持通过鼠标拖拽的方式调整节点位置了.只需引用最新版本的 jsmind.js 以及 jsmind.draggable.js 即可使用该功能.需要注意的是,当思维导图设置为不可编辑的时候,拖拽功能也将同时禁止. 请访问项目主页:http://
超酷的鼠标拖拽翻页(分页)效果实现javascript代码

拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{
js实现百度登录框鼠标拖拽效果

以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照
鼠标拖拽移动子窗体的JS实现

1.子窗体在设计网站的时候,我们需要设计一些模态的子窗体,比如这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码代码如下: <div class="modal-background"></div> <div class="modal-window"> <div class="head"> <center>点住着块区域可以改
js实现使用鼠标拖拽切换图片的方法

本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan
使用javaScript实现鼠标拖拽事件

本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3
JS鼠标拖拽实例分析

本文实例讲述了JS鼠标拖拽实现方法.分享给大家供大家参考,具体如下: JS代码: <script> window.onload=function() { var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=function(ev) //鼠标按下DIV { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X
javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)

mousedown 的时候创建拖动对象,mouseup的时候释放对象,原理弄清楚了其实很简单. 简单拖拽实现代码: 简单拖拽实现 *{margin:0;padding:0;} #box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } #dragBox{ width:50px; height:50p
js实现鼠标拖拽多选功能示例

最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&
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?i
js实现模态框的拖拽效果

本文实例为大家分享了js实现模态框拖拽效果的具体代码,供大家参考,具体内容如下之前学习js遇到了这样的需求:鼠标按下后,移动鼠标,模态框随鼠标移动,鼠标松开,模态框也不会随鼠标移动.<完整的代码在最后哦> 分析思路: 1.点击弹出层,模态框和遮挡层就会显示出来.display:block2.点击关闭按钮,模态框和遮挡层就会隐藏.display:none 3.在页面中拖拽的步骤:鼠标按下并移动,之后松开鼠标4.触发事件是鼠标按下mousedown,鼠标移动是mousemove,鼠标松开:mou
js实现弹出框的拖拽效果实例代码详解

具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&
bootstrap模态框实现拖拽效果

本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的. 网上搜了搜,找到个blog发现基本功能是可用的.但是效果不太友好.问题有以下两个拖动时候背后文字会被选中,很难看 modal模态框会被拖出边框以外,很难看
JavaScript实现div的鼠标拖拽效果

本文实例为大家分享了JavaScript实现div鼠标拖拽效果的具体代码,供大家参考,具体内容如下实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class="box"></div> CSS样式 .box { position: absolute; width: 200px; height: 200px; background: re
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
JavaScript实现鼠标拖拽效果

本文实例为大家分享了JavaScript实现鼠标拖拽效果的具体代码,供大家参考,具体内容如下这次的效果图如下: 我认为这个实验的难点是保持盒子和鼠标的相对位置不变,通过鼠标按下和移动来实现拖拽的效果如何实现拖拽的效果呢? 我们需要用到三个函数: onmousedown.onmousemove.onmouseup,分别表示鼠标按下.鼠标移动.鼠标抬起在鼠标按下的回调函数中,我们需要通过clientX和clientY获取鼠标的初始位置,通过offsetLeft和offsetTop获取盒子的初始
js实现本地图片文件拖拽效果

如何拖拽文件到指定位置,具体方法如下在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上代码完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #dropBox{ width: 300px; height:
js实现百度登录窗口拖拽效果

前言在我们使用百度相关的功能网页的时候,我们要去登录账号.但是小伙伴们有没有关注过百度的登录窗口的拖拽效果呢?下面分享仿百度登录拖拽效果的源码代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 200px; heig

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

相关推荐

随机推荐