这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了原生 js 实现可拖动的登录框效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
实现原理
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>
来源: http://www.phperz.com/article/17/0528/328265.html