js仿腾讯QQ的web登陆界面

这篇文章主要为大家详细介绍了JavaScript模仿腾讯QQ的web登陆界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

用了腾讯QQ也有将近十年了，今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板，然后参考了一些代码，自己模仿，学写了一个。

效果如下：

其中还实现了拖动面板，选择状态的效果
下面是具体代码：

1.index.html

   拖动   
 帐　号：
密　码：
 
  状态
下
在线
  
我在线上
 
Q我吧
 
离开
 
忙碌
 
请勿打扰
 
隐身

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-600') 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-600") 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-600") 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-600") -72px 0 no-repeat; } .login-state .online { background: url("../images/ptlogin.png-600") 0 0 no-repeat; } .login-state .away { background: url("../images/ptlogin.png-600") -18px 0 no-repeat; } .login-state .busy { background: url("../images/ptlogin.png-600") -36px 0 no-repeat; } .login-state .silent { background: url("../images/ptlogin.png-600") -108px 0 no-repeat; } .login-state .hidden { background: url("../images/ptlogin.png-600") -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-600') no-repeat;z-index:1}.ie6_0 .ui_boxyClose{background:0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png-600',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;imaxW){ l=maxW; } if(t<0){ t=10; }else if(t>maxH){ t=maxH; } oDrag.style.left=l+'px'; oDrag.style.top=t+'px'; }

4.最后是需要的图片文件