用了腾讯QQ也有将近十年了,今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板,然后参考了一些代码,自己模仿,学写了一个。
效果如下:
其中还实现了拖动面板,选择状态的效果
下面是具体代码:
1.index.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>拖动</title> <link href="css/main.css" rel="stylesheet" /> <script src="js/drag.js"></script> </head> <body> <div class="loginPanel" id="loginPanel"> <div style="position: relative; z-index: 1;"> <div class="ui_boxyClose" id="ui_boxyClose"></div> </div> <div class="login_logo_webqq"></div> <div class="inputs"> <div class="sign-input"><span>帐 号:</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div> <div class="sign-input"><span>密 码:</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div> </div> <div class="bottomDiv"> <div class="btn" style="float: left"></div> <div> <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态"> <div id="loginStateShow" class="login-state-show online">状态</div> <div class="login-state-down">下</div> <div class="login-state-txt" id="login2qq_state_txt">在线</div> <ul id="loginStatePanel" class="statePanel login-state" style="display: none"> <li id="online" class="statePanel_li"> <div class="stateSelect_icon online"></div> <div class="stateSelect_text">我在线上</div> </li> <li id="callme" class="statePanel_li"> <div class="stateSelect_icon callme"></div> <div class="stateSelect_text">Q我吧</div> </li> <li id="away" class="statePanel_li"> <div class="stateSelect_icon away"></div> <div class="stateSelect_text">离开</div> </li> <li id="busy" class="statePanel_li"> <div class="stateSelect_icon busy"></div> <div class="stateSelect_text">忙碌</div> </li> <li id="silent" class="statePanel_li"> <div class="stateSelect_icon silent"></div> <div class="stateSelect_text">请勿打扰</div> </li> <li id="hidden" class="statePanel_li"> <div class="stateSelect_icon hidden"></div> <div class="stateSelect_text">隐身</div> </li> </ul> </div> </div> </div> </div> </body> </html>
2.css/main.css:
.loginPanel { width: 380px; height: 247px; left: 400px; top: 120px; position: absolute; border: 1px solid #ccc; background: #f6f6f6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 8px #000; -webkit-box-shadow: 0 0 8px #000; box-shadow: 0 0 8px #000; } .login_logo_webqq { background: url('../images/login_window_logo.png') no-repeat -210px -0px; margin-left: 100px; margin-top: 10px; width: 200px; height: 44px; cursor: move; } .inputs { font: bold 15px arial; margin-left: 80px; margin-top: 30px; } .inputs .sign-input { padding-bottom: 20px; } .inputs .sign-input input { width: 170px; border: 1px #ccc solid; color: #868686; font-size: 16px; padding: 2px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -border-radius: 10px; outline: none; } .btn { background: url("../images/login_btn.png") no-repeat -111px 0; width: 111px; height: 36px; border: 0; text-align: center; line-height: 20px; color: #0C4E7C; cursor: pointer; margin-left: 14px; } .login-state-trigger { cursor: pointer; display: block; float: left; height: 16px; overflow: hidden; width: 120px; margin: 4px 0 0 0; } .login-state-trigger2 { margin: 10px 0 0 20px; } .login-state-down { background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent; float: left; height: 6px; margin-top: 5px; overflow: hidden; text-indent: -999em; width: 7px; } .login-state-show { float: left; height: 14px; overflow: hidden; text-indent: -999em; width: 14px; margin: 1px 4px 0 0; } .login-state-txt { float: left; margin-left: 5px; font-size: 12px; >line-height:18px!important; } .login-state .callme { background: url("../images/ptlogin.png") -72px 0 no-repeat; } .login-state .online { background: url("../images/ptlogin.png") 0 0 no-repeat; } .login-state .away { background: url("../images/ptlogin.png") -18px 0 no-repeat; } .login-state .busy { background: url("../images/ptlogin.png") -36px 0 no-repeat; } .login-state .silent { background: url("../images/ptlogin.png") -108px 0 no-repeat; } .login-state .hidden { background: url("../images/ptlogin.png") -54px 0 no-repeat; } .statePanel { display: none; position: absolute; right: 68px; top: 193px; z-index: 10; margin: 0; border-width: 1px; border-style: solid; border-color: #ccc #6a6a6a #666 #cdcdcd; padding: 0; width: 100px; height: 133px; overflow: hidden; background: white; font-size: 12px; line-height: 1.5; } .statePanel .statePanel_li { display: block; float: left; margin: 0; padding: 3px 0; width: 100px; height: 16px; line-height: 16px; overflow: hidden; zoom: 1; cursor: pointer; } .stateSelect_icon { float: left; margin: 2px 0 0 5px; width: 14px; height: 14px; overflow: hidden; } .stateSelect_text { margin: 0 0 0 22px; } .bottomDiv { margin-left: 70px; } .ui_boxyClose{width:28px;height:28px;position:absolute;top:-10px;right:-10px;cursor:pointer;background:url('../images/boxy_btn.png') no-repeat;z-index:1}.ie6_0 .ui_boxyClose{background:0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')}
3.js/drag.js:
function getByClass(clsName,parent){ var oParent=parent?document.getElementById(parent):document, eles=[], elements=oParent.getElementsByTagName('*'); for(var i=0,l=elements.length;i<l;i++){ if(elements[i].className==clsName){ eles.push(elements[i]); } } return eles; } window.onload=drag; function drag(){ var oTitle=getByClass('login_logo_webqq','loginPanel')[0]; // 拖曳 oTitle.onmousedown=fnDown; // 关闭 var oClose=document.getElementById('ui_boxyClose'); oClose.onclick=function(){ document.getElementById('loginPanel').style.display='none'; } // 切换状态 var loginState=document.getElementById('loginState'), stateList=document.getElementById('loginStatePanel'), lis=stateList.getElementsByTagName('li'), stateTxt=document.getElementById('login2qq_state_txt'), loginStateShow=document.getElementById('loginStateShow'); loginState.onclick=function(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } stateList.style.display='block'; } // 鼠标滑过、离开和点击状态列表时 for(var i=0,l=lis.length;i<l;i++){ lis[i].onmouseover=function(){ this.style.background='#567'; } lis[i].onmouseout=function(){ this.style.background='#FFF'; } lis[i].onclick=function(e){ e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } var id=this.id; stateList.style.display='none'; stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML; loginStateShow.className=''; loginStateShow.className='login-state-show '+id; } } document.onclick=function(){ stateList.style.display='none'; } } function fnDown(event){ event = event || window.event; var oDrag=document.getElementById('loginPanel'), // 光标按下时光标和面板之间的距离 disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop; // 移动 document.onmousemove=function(event){ event = event || window.event; fnMove(event,disX,disY); } // 释放鼠标 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } function fnMove(e,posX,posY){ var oDrag=document.getElementById('loginPanel'), l=e.clientX-posX, t=e.clientY-posY, winW=document.documentElement.clientWidth || document.body.clientWidth, winH=document.documentElement.clientHeight || document.body.clientHeight, maxW=winW-oDrag.offsetWidth-10, maxH=winH-oDrag.offsetHeight; if(l<0){ l=0; }else if(l>maxW){ l=maxW; } if(t<0){ t=10; }else if(t>maxH){ t=maxH; } oDrag.style.left=l+'px'; oDrag.style.top=t+'px'; }
4.最后是需要的图片文件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
手机QQ的账号选择功能一直与众不同别具一格,通过一个下箭头拉开在原有的账号密码中间展开一个账号盒子,盒子中有已经登陆过的账号头像,选择一个头像即可快速切换。今天为大家再来基本上重现这一功能的demo。 功能点: -初始状态默认有2已登录的QQ账号,您可以直接下拉看到这2个账号,点击头像即可填入到2个文本框内。 -账号盒子被打开的时候,头像 和账号密码等会变成半透明 -如果您另行输入一个新的QQ号,
本文向大家介绍PHP+jquery+CSS制作头像登录窗(仿QQ登陆),包括了PHP+jquery+CSS制作头像登录窗(仿QQ登陆)的使用技巧和注意事项,需要的朋友参考一下 本篇介绍设计了一个简单有趣的包含Gravatar头像的登录框功能,头像是基于邮件id从gravatar.com导出的。这篇文章是非常基本的层面上的CSS实现和几行Jquery和PHP代码。我希望这个登录框设计对您的web项目
3.8 自我介绍 介绍webserver项目 线程池怎么设计的? 如何保证对数据的安全访问? 加锁会不会影响性能,如何减少性能损耗,避免加锁氛围过大 cpp哪些容器是线程安全的 你的任务队列自己实现的还是库 死锁的四个必要条件 如何避免,以及你的项目如何解决死锁 多线程的好处?如果只有单核多线程有意义吗? 线程切换栈会保留哪些? 局部对象是堆呢? http长连接和短连接 epoll多路复用如何实现
🕒 岗位/笔试时间 软件-后台开发 昨天晚上面的 今天就挂了 📝 笔试题目 上来一道手撕LRU缓存 面试官说只需要写出主体 不用输入输出 基本上没什么问题 后面让我介绍一下发的论文和做的项目 cpp八股 11新特性,智能指针,还问到了智能指针是如何引用计数自动加一 直接不会 后面还有cpp执行的过程 然后问到最后生成的可执行文件包含什么内容 直接不会 最后问了Tcp的三次握手四次挥手 结束!
一面1h30m 自我介绍 项目介绍 深挖项目 八股: redis的数据类型 zset的底层原理 redis实现延迟队列 数据一致性问题 MySQL索引,为什么用B+树 MySQL事务,隔离级别 mvcc http1.1与2的区别 算法题: 排序链表去重 二面20m: 介绍自己的优势 构建一个系统需要关注哪些方面 系统高可用高容错的方案 了解的新技术
本文向大家介绍如何测试登陆界面相关面试题,主要包含被问及如何测试登陆界面时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 一、功能测试 输入正确的用户名和密码,点击提交按钮,验证是否能正确登录。 输入错误的用户名或者密码,验证登录会失败,并且提示相应的错误信息。 登录成功后能否能否跳转到正确的页面 用户名和密码,如果太短或者太长,应该怎么处理 用户名和密码,中有特殊字符(比如空格),和其他非