web——仿千牛登录
来源:互联网 发布:黑科技网络翻墙 编辑:程序博客网 时间:2024/06/18 08:53
点击登录按钮,会弹出千牛的登录框,密码输入有一个蒙眼睛的动作,最小化会在左下角隐藏登录框,是不是很有趣呢!
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .login{ border: 1px solid #E0E0E0; position: absolute; top: 200px; left: 30%; width: 390px; height: 310px; display: none; } .user input{ display: block; margin: 20px auto; width: 200px; height: 25px; font-size: 14px; text-indent: 32px; border-radius: 30px; border: 1px solid #BABABA; outline: none; } .user{ position: absolute; top: 130px; left: 90px; } .icon-user{ display: block; position: absolute; border-radius: 50px; top: 21px; left: 5px; width: 25px; height: 25px; overflow: hidden; } .icon-user img{ position: absolute; top: -14px; left: -12px; } .icon-pwd{ display: block; position: absolute; border-radius: 50px; top: 70px; left: 5px; width: 25px; height: 25px; overflow: hidden; } .icon-pwd img{ position: absolute; top: -55px; left: -13px; } .min{ position: absolute; top: 5px; right: 35px; width: 20px; height: 20px; z-index: 110; } .close-login{ position: absolute; top: 5px; right: 7px; width: 20px; height: 20px; z-index: 110; } .min-div{ position: absolute; bottom: 1px; width: 100px; height: 30px; background-color: #0894EC; color: #FFFFFF; text-align: center; line-height: 30px; display: none; } .min:hover{ cursor: pointer; border: 1px solid #FFFFFF; } .close-login:hover{ cursor: pointer; border: 1px solid #FFFFFF; } .min-div:hover{ cursor: pointer; opacity: 0.8; } #move{ position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 100; } #move:hover{ cursor: move; } .user button{ width: 200px; height: 30px; display: block; margin: 0px auto; border: 1px solid #0894EC; background-color: #0894EC; color: #FFFFFF; border-radius: 50px; } .user button:hover{ cursor: pointer; } </style> <script type="text/javascript" src="js/a.js" ></script> <script> //显示登录窗口 function loginShow(o){ document.getElementById("move_div").style.display = "block"; document.getElementById("btn").style.display = "none"; } //用户框获取焦点 function userFocus(){ var user = document.getElementById("userName"); user.style.borderColor = "#0894EC"; } //用户框失去焦点 function userBlur(){ var user = document.getElementById("userName"); user.style.borderColor = "#BABABA"; } //密码框获取焦点 function myFocus(){ var backimg = document.getElementById("backimg"); var pwd = document.getElementById("password"); backimg.src = "img/pwd-input.jpg"; pwd.style.borderColor = "#0894EC"; } //密码框失去焦点 function myBlur(){ var backimg = document.getElementById("backimg"); var pwd = document.getElementById("password"); backimg.src = "img/user-input.jpg"; pwd.style.borderColor = "#BABABA"; } //最小化 function min(){ document.getElementById("move_div").style.display = "none"; document.getElementById("min-div").style.display = "block"; } //最大化 function max(){ document.getElementById("move_div").style.display = "block"; document.getElementById("min-div").style.display = "none"; } //关闭窗口 function closeLogin(){ document.getElementById("move_div").style.display = "none"; document.getElementById("btn").style.display = "block"; } </script> </head> <body> <button id="btn" onclick="loginShow()">登录</button> <div id="move_div" class="login"> <img id="backimg" src="img/user-input.jpg" /> <!--拖拽区域--> <div id="move" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div> <!--最小化--> <div id="min" class="min" onclick="min()"></div> <!--关闭--> <div id="close-login" class="close-login" onclick="closeLogin()"></div> <!--用户输入--> <div class="user"> <span class="icon-user"> <img src="img/login-ioc.jpg" /> </span> <span class="icon-pwd"> <img src="img/login-ioc.jpg" /> </span> <input id="userName" type="text" onfocus="userFocus()" onblur="userBlur()"/> <input id="password" type="password" onfocus="myFocus()" onblur="myBlur()" /> <button>登录</button> </div> </div> <!--最小化后显示区域--> <div id="min-div" class="min-div" onclick="max()"> +用户登录 </div> </body></html>
js代码
/* * 分析: * 获取鼠标实时移动的坐标;m_move_x,m_move_y * 鼠标按下时的坐标;m_down_x,m_down_y * div的坐标;dx,dy * 鼠标按下时,鼠标与div的偏移量;md_x,md_y * div的新坐标;ndx,ndy */var isDown = false; //记录鼠标状态var move_div; //要操作的div对象var m_move_x, m_move_y, m_down_x, m_down_y, dx, dy, md_x, md_y, ndx, ndy;//鼠标按下function down() { move_div = document.getElementById("move_div"); isDown = true; //获取鼠标按下时坐标 m_down_x = event.pageX; m_down_y = event.pageY; //获取div坐标 dx = move_div.offsetLeft; dy = move_div.offsetTop; //获取鼠标与div偏移量 md_x = m_down_x - dx; md_y = m_down_y - dy;}//鼠标移动function move() { move_div = document.getElementById("move_div"); //实时更新div的坐标 dx = move_div.offsetLeft; dy = move_div.offsetTop; //获取鼠标移动实时坐标 m_move_x = event.pageX; m_move_y = event.pageY; //鼠标按下时移动才触发 if(isDown) { //获取新div坐标,鼠标实时坐标 - 鼠标与div的偏移量 ndx = m_move_x - md_x; ndy = m_move_y - md_y; //把新div坐标值赋给div对象 move_div.style.left = ndx + "px"; move_div.style.top = ndy + "px"; }}//鼠标释放function up() { isDown = false;}
效果图
阅读全文
0 0
- web——仿千牛登录
- web——界面登录
- 拒绝平庸——浅谈Web登录页面设计
- 拒绝平庸——浅谈Web登录页面设计
- 拒绝平庸——浅谈Web登录页面设计
- 拒绝平庸——浅谈Web登录页面设计
- 拒绝平庸——浅谈Web登录页面设计
- 拒绝平庸——浅谈WEB登录页面设计
- Web QQ 协议 登录加密算法 —— VC++实现
- 拒绝平庸——浅谈WEB登录页面设计
- WEB——登录实例(类型转换)
- Web应用初体验——登录登出验证系统
- web登录
- 注册——登录实战演习 (使用java web应用的三层架构实现)
- NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
- NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
- Web应用——驾培管理系统之登录功能(作者:小圣)
- Web应用——驾培管理系统之登录功能
- [特斯拉组件]iOS 高性能 PageController
- 机房逻辑捋一捋(一)
- ActionSupport cannot be resolved to a type解决方案
- 栅格系统
- 数据结构习题回顾与总结 (2) List Leaves
- web——仿千牛登录
- 数据库加密之iOS项目配置SQLCipher
- VIPs Often Go Offline Unexpectedly and Relocate to Another Node(文档 ID 1297867.1)
- 【传智播客郑州校区分享】线程精进指南
- Win下必备神器之Cmder
- 屏蔽点击BackSpace键页面后退
- CSS中的background的详细属性
- 适配iOS11& iPhoneX的一些坑
- 第15章 I/O输入输出流