Java---仿千牛登录
来源:互联网 发布:网络招聘广告 编辑:程序博客网 时间:2024/06/05 14:31
千牛登录页面的一个案例代码
<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---仿千牛登录
- Java模拟网站登录
- 登录网页java程序
- JAVA,模拟HTTP登录
- java模拟页面登录
- java自动登录
- Java登录过滤器
- Java登录界面
- java实现用户登录
- Java登录界面
- java 模拟web登录
- java登录界面代码
- java httpclient 模拟登录
- java实现单点登录
- java登录界面
- Java单点登录
- Java单点登录
- java实现单点登录
- window.onload与document.ready()的区别
- 进程间通信、线程间通信
- Spring jpa更新当属性值为Null的时候也更新问题
- Visualizing and Understanding Convolutional Networks总结
- HOTween简单应用
- Java---仿千牛登录
- 数据库必读书籍推荐
- GDB调试正在运行的程序
- Linux CentOS网络启动Failed问题:“Bringing up interface eth0: Device eth0 does not seem to be present”
- 使用jQuery隐藏标签
- Linux下串口通信详解(上)打开串口和串口初始化详解
- centos 7.2 安装python talib
- Font.Finagler.v1.0.MacOSX.Incl
- 狗狗得了脑炎怎么办