原生js实现可拖动的登录框效果


Posted in Javascript onJanuary 21, 2017

实现原理

1.onmousemove事件触发时不断更新鼠标的pageXY改变位置,

登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离

2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离,再设置true允许拖拽

3.onmouseup 鼠标弹起设置false停止拖拽

4.登录框居中显示公式:(可视区域宽高-登录框宽高)/2

5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示

代码中有详细的注释

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
/*p{font-size: 100px;}*/
#btn{width: 80px;
 height: 40px;
 background: #3b7ae3;
 margin:0 auto;
 display: block;
 cursor: pointer;
 border-style: none;
 color: #fff;
 font-size: 16px;}
#mask{
 background: #000;
 opacity: 0.75;
 filter: alpha(opacity=75);
 height: 1000px;
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1000;
}
#login{position: absolute; top: 100px; left: 100px; width: 400px; height: auto; border:1px solid #d5d5d5; z-index: 1001; }
.title{position: relative;background-color: #f7f7f7; cursor: move; height: 50px; line-height: 50px; font-size: 16px; color: #333; padding-left:30px;}
.close{position: absolute; top:0; right: 10px; color: #ccc;}
.content{background: #fff; padding: 15px 20px;}
.user{margin-bottom: 15px;}
.password{margin-bottom: 15px;}
.pt{display: block;
 height: 38px;
 padding-left: 15px;
 border: 1px solid #ddd;
 transition: .3s;
 font-size: 14px;
 color: #666;
 width: 343px;
 }
.sm{display: block;
 height: 48px;
 border: 1px solid #ddd;
 transition: .3s;
 font-size: 16px;
 color: #666;
 width: 360px;
 background: #3b7ae3;
 color: #fff;}
</style> 
</head> 
<body>
 <!-- <div id="mask"></div> -->
 <button id="btn" href="">登录</button>
 <!-- <div class="login" id="login">
 <div class="title" id="title">登录百度账号<a href="#" class="close">x</a></div>
 <div class="content">
 <div class="user"><input class="pt" type="input" value="手机/邮箱/用户名"></div>
 <div class="password"><input class="pt" type="input" value="密码"></div>
 <div class="submit"><input class="sm" type="submit" value="登录"></div>
 </div>
 </div> -->
<script type="text/javascript">
 function b(){ 
 //创建遮罩层div并插入body
 var mask=document.createElement("div");
 mask.id="mask";
 mask.style.height=cheight+"px";
 //宽度直接用100%在样式里
 document.body.appendChild(mask);
 //创建登录层div并插入body
 var login=document.createElement("div");
 login.id="login";
 login.innerHTML='<div class="title" id="title">登录百度账号'+'<a href="#" class="close">x</a>'+'</div>'+
 '<div class="content">'+'<div class="user">'+'<input class="pt" type="input" value="手机/邮箱/用户名">'+'</div>'+'<div class="password">'+'<input class="pt" type="input" value="密码">'+'</div>'+'<div class="submit">'+'<input class="sm" type="submit" value="登录">'+'</div>'+'</div>';
 document.body.appendChild(login);
 //窗口可视区域宽度
 var cwidth= document.documentElement.clientWidth || document.body.clientWidth;
 //窗口可视区域高度
 var cheight= document.documentElement.clientHeight || document.body.clientHeight;
 //登录框宽度
 var lwidth=login.offsetWidth;
 //登录框高度
 var lheight=login.offsetHeight;
 //设置登录框的居中显示
 login.style.left=(cwidth-lwidth)/2+"px";
 login.style.top=(cheight-lheight)/2+"px";
 //设置遮罩层的高度
 mask.style.height=cheight+"px";
 //改变窗口大小后依然居中显示
 window.onresize=function(){
 if(document.compatMode=="CSS1Compat"){  
cwidth=document.documentElement.clientWidth;
cheight=document.documentElement.clientHeight;
 }else{  
  cwidth=document.body.clientWidth;
  cheight=document.body.clientHeight;
 }
 login.style.left=(cwidth-lwidth)/2+"px";
 login.style.top=(cheight-lheight)/2+"px";
 mask.style.height=cheight+"px";
 }
 //获取拖拽容器
 var title=document.getElementById("title");
 var isDraging=false;
 var mouseOffsetX;
 var mouseOffsetY;
 //鼠标按下事件
 title.onmousedown=function(e){
 var e=e||window.event;
 /*var el=e.srcElement;
 if(!el){
 el=e.target;//兼容火狐
 }*/
 //鼠标相对于登录框的位置
 mouseOffsetX=e.pageX-login.offsetLeft;
 mouseOffsetY=e.pageY-login.offsetTop;
 //鼠标摁下时为true
 isDraging=true;
 /*console.log(mouseOffsetY, mouseOffsetX)*/
 }
 //鼠标移动事件
 document.onmousemove=function(e){
 var e=e||window.event;
 //鼠标移动时的坐标
 var newMX=e.pageX;
 var newMY=e.pageY;
 //判断为true时可以拖拽
 if(isDraging===true){
 //登录框的偏移值=当前位置-鼠标到登录框的距离
 var loginL=newMX-mouseOffsetX;
 var loginT=newMY-mouseOffsetY;
 //如果left top值超过边缘时就让他等于边缘
 if(loginL<0){
 loginL=0;
 }else if(loginL>(cwidth-lwidth)){
 loginL=cwidth-lwidth;
 }
 if(loginT<0){
 loginT=0;
 }else if(loginT>(cheight-lheight)){
 loginT=cheight-lheight;
 }
 login.style.left=loginL+"px";
 login.style.top=loginT+"px";
 } 
 }
 //鼠标弹起时设置为不可拖拽
 document.onmouseup=function(){
 isDraging=false;
 }
 //点击X关闭登录框和弹出层
 var close=login.getElementsByClassName("close")[0];
 close.onclick=function(){
 document.body.removeChild(mask);
 document.body.removeChild(login);
 }
 }
 //点击登录弹出登录框和弹出层
 window.onload=function(){
 var btn=document.getElementById("btn");
 btn.onclick=function(){
 b();
 }
 }
</script> 
</body> 
</html>

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

Javascript 相关文章推荐
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
微信小程序 WebSocket详解及应用
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 #Javascript
遍历json获得数据的几种方法小结
Jan 21 #Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 #Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 #Javascript
微信小程序 devtool隐藏的秘密
Jan 21 #Javascript
JS设置CSS样式的方式汇总
Jan 21 #Javascript
You might like
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python格式化输出%s和%d
2018/05/07 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
盛大笔试题
2016/11/05 面试题
商场中秋节活动方案
2014/02/07 职场文书
安全宣传标语
2014/06/10 职场文书
商场租赁意向书
2014/07/30 职场文书
公司领导班子对照材料
2014/08/18 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
打架检讨书
2015/01/27 职场文书
工作简报怎么写
2015/07/21 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS