原生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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
表单内同名元素的控制
2006/11/22 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
js实现日历的简单算法
2017/01/24 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
python安装Scrapy图文教程
2017/08/14 Python
python DataFrame 取差集实例
2019/01/30 Python
学python安装的软件总结
2019/10/12 Python
python 函数中的参数类型
2020/02/11 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
半年思想汇报
2013/12/30 职场文书
致800米运动员广播稿
2014/02/16 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
舞蹈社团活动总结
2015/05/07 职场文书