仿千牛登录
来源:互联网 发布:12306订票软件下载 编辑:程序博客网 时间:2024/06/02 04:57
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .login{ border: 1px solid #E0E0E0; position: absolute; width: 390px; height: 310px; /*display: none;*/ } .user{ position: absolute; top:140px; left:90px; } .user input{ display: block; margin: 15px auto; width: 200px; height:25px; border-radius: 50px; border: 1px solid #BABABA; text-indent: 30px; outline: none;/*取消获取焦点的默认效果*/ } #userImg{ position: absolute; top: 16px; left: 3px; width: 25px; height: 25px; border-radius:50% ; overflow: hidden; } #userImg img{ margin-top: -14px; margin-left: -12px; } #pwdImg{ position: absolute; top: 60px; left: 3px; width: 25px; height: 25px; border-radius:50% ; overflow: hidden; } #pwdImg img{ margin-top: -55px; margin-left: -13px; } .user button{ display: block; margin: 0px auto; border: 1px solid #0894EC; background-color: #0894EC; color: #FFFFFF; width: 150px; height: 30px; border-radius: 50px; } .user button:hover{ cursor: pointer; } .tz{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; z-index: 100; } .tz:hover{ cursor: move; } .min{ position: absolute; right: 35px; top: 4px; width: 20px; height: 20px; z-index: 110; } .min:hover{ cursor: pointer; border: 1px solid #FFFFFF; } .min-div{ position: absolute; bottom: 5px; left: 5px; width: 150px; height: 30px; background-color: #0894EC; line-height: 30px; text-align: center; color: #FFFFFF; display: none; } .min-div:hover{ cursor: pointer; opacity: 0.8; } .closeLogin{ position: absolute; right:8px; top: 4px; width: 20px; height: 20px; z-index: 110; } .closeLogin:hover{ cursor: pointer; /*border: 1px solid #FFFFFF;*/ background-color: #FFFFFF ; opacity: 0.3; } </style> <script> //声明全局变量 var user,pwd,backimg,move_div,min_div; //当前文档加载完成后再执行 window.onload = function(){ user = document.getElementById("userName"); pwd = document.getElementById("password"); backimg = document.getElementById("backimg"); move_div = document.getElementById("move_div"); min_div = document.getElementById("min-div"); } //显示登录窗口 function showLogin(){ move_div.style.display = "block"; } //获取焦点事件 function userFocus(){ user.style.borderColor = "#0894EC"; } function pwdFocus(){ pwd.style.borderColor = "#0894EC"; backimg.src = "img/pwd-input.jpg"; } //失去焦点事件 function userBlur(){ user.style.borderColor = "#BABABA"; } function pwdBlur(){ pwd.style.borderColor = "#BABABA"; backimg.src = "img/user-input.jpg"; } //登录窗口最小化 function minLogin(){ move_div.style.display = "none"; min_div.style.display = "block"; } //登录窗口最大化 function maxLogin(){ move_div.style.display = "block"; min_div.style.display = "none"; } //关闭窗口 function closeLogin(){ move_div.style.display = "none"; } </script> <script type="text/javascript" src="js/a.js" ></script> </head> <body> <a href="javascript:showLogin();">登录</a> <!--登录窗口--> <div id="move_div" class="login" onmousedown="down()" onmouseup="up()" onmousemove="move()"> <!--实现拖拽的div--> <div class="tz"></div> <!--实现最小化按钮--> <div class="min" onclick="minLogin()"></div> <!--实现关闭按钮--> <div class="closeLogin" onclick="closeLogin()"></div> <img id="backimg" src="img/user-input.jpg" /> <!--用户输入--> <div class="user"> <!--输入框图标--> <div id="userImg"> <img src="img/login-ioc.jpg" /> </div> <div id="pwdImg"> <img src="img/login-ioc.jpg" /> </div> <input id="userName" type="text" onfocus="userFocus()" onblur="userBlur()" /> <input id="password" type="password" onfocus="pwdFocus()" onblur="pwdBlur()" /> <button>登录</button> </div> </div> <!--最小化的div--> <div id="min-div" class="min-div" onclick="maxLogin()"> + 用户登录 </div> </body></html>
阅读全文
0 0
- 仿千牛登录
- 仿千牛登录界面
- 仿千牛登录界面
- 仿千牛登录页面
- Java---仿千牛登录
- 登录
- 登录
- 登录
- 登录
- 登录
- 登录
- 登录
- 登录
- 登录
- 登录
- 登录
- 登录
- 登录
- ssm框架面试题
- EventBus 源码解析
- leetcode: 606. Construct String from Binary Tree
- oracle 分区表放入不同的表空间
- Spring Boot 之Spring Boot Starter依赖包及作用
- 仿千牛登录
- 《并发编程》--20.无锁的并发策略(比较交换 CAS)
- 第四周 项目五 猴子选大王
- GBDT系列文章
- 快速排序详解
- Git远程操作详解
- Java常用集合类型总结
- 数组为什么可以使用linq查询
- Android-TextView的includeFontPadding到底行不行