| 本文分享一个用原生JS实现的可拖拽登录框，效果如下： 
实现的代码如下： <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现可拖拽登录框</title> <style type="text/css"> body { /* 背景图 */ background: url(images/0.png) #fff top center no-repeat; padding: 0px; margin: 0px; font-size: 12px; font-family: "微软雅黑"; } .link { text-align: right; line-height: 20px; padding-right: 40px; } .ui-dialog { width: 380px; height: auto; display: none; position: absolute; z-index: 9000; top: 0px; left: 0px; border: 1px solid #D5D5D5; background: #fff; } .ui-dialog a { text-decoration: none; } .ui-dialog-title { height: 48px; line-height: 48px; padding: 0px 20px; color: #535353; font-size: 16px; border-bottom: 1px solid #efefef; background: #f5f5f5; cursor: move; user-select: none; } .ui-dialog-closebutton { width: 16px; height: 16px; display: block; position: absolute; top: 12px; right: 20px; /* 关闭登录框的图标 */ background: url(images/1.png) no-repeat; cursor: pointer; } .ui-dialog-closebutton:hover { /* 关闭登录框鼠标悬停时的图标 */ background: url(images/2.png); } .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: 0px; padding: 0px; border: 1px solid #d5d5d5; font-size: 16px; color: #c1c1c1; text-indent: 25px; outline: none; } .ui-dialog-input-username { /* 输入用户名的图标 */ background: url(images/4.png) no-repeat 2px; } .ui-dialog-input-password { /* 输入密码的图标 */ background: url(images/3.png) no-repeat 2px; } .ui-dialog-submit { width: 100%; height: 50px; background: #3b7ae3; border: none; font-size: 16px; color: #fff; 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; position: absolute; top: 0px; height: 0px; z-index: 8000; opacity: 0.4; /*兼容低版本的ie*/ filter: Alpha(opacity=40); } </style></head> <body> <div class="link"> <a href="javascript:showDialog();" >登录</a> </div> <!-- 设置一个背景遮罩层,防止鼠标选中事件 --> <div class="ui-mask" id="mask" onselectstart="return false"></div> <div class="ui-dialog" id="dialogMove" onselectstart='return false;'> <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;"> 登录通行证 <a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></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" value="手机/邮箱/用户名" /> </div> <div class="ui-dialog-l40 ui-dialog-pt15"> <input class="ui-dialog-input ui-dialog-input-password" type="input" value="密码" /> </div> <div class="ui-dialog-l40"> <a href="#" >忘记密码</a> </div> <div> <a class="ui-dialog-submit" href="#" >登录</a> </div> <div class="ui-dialog-l40"> <a href="#" >立即注册</a> </div> </div> </div> <script type="text/javascript"> //声明获取元素对象方法 function $(id) { return document.getElementById(id); } //声明自动居中元素方法（el = Element） function autoCenter(el) { //获得网页可视区域的宽和高 var bodyW = document.documentElement.clientWidth; var bodyH = document.documentElement.clientHeight; //获得传入元素的实际宽和高 var elW = el.offsetWidth; var elH = el.offsetHeight; //设置元素的left为可视区域的宽度减去自身宽度的值除以2,top同理 el.style.left = (bodyW - elW) / 2 + 'px'; el.style.top = (bodyH - elH) / 2 + 'px'; } //自动扩展元素到全部显示区域 function fillToBody(el) { //设置当前元素的宽度和高度为可视区域的宽和高 el.style.width = document.documentElement.clientWidth + 'px'; el.style.height = document.documentElement.clientHeight + 'px'; } //设定鼠标在X和Y方向的初始值为0 var mouseOffsetX = 0; var mouseOffsetY = 0; //是否可拖拽的标记 var isDraging = false; //鼠标事件1
下载地址:
JavaScript给事件委托批量添加事件监听详细流程
JavaScript中var let const的用法有哪些区别 |
