用了腾讯QQ也有将近十年了，今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板，然后参考了一些代码，自己模仿，学写了一个。
效果如下：
其中还实现了拖动面板，选择状态的效果
下面是具体代码：
1.index.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>拖动</title> <link href="https://www.jb51.net/css/main.css" /> <script src="https://www.jb51.net/js/drag.js"></script> </head> <body> <div> <div> <div></div> </div> <div></div> <div> <div><span>帐 号：</span><span><input autocomplete="on" type="text" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div> <div><span>密 码：</span><span><input maxlength="16" type="password" tabindex="2" /></span></div> </div> <div> <div></div> <div> <div title="选择在线状态"> <div>状态</div> <div>下</div> <div>在线</div> <ul> <li> <div></div> <div>我在线上</div> </li> <li> <div></div> <div>Q我吧</div> </li> <li> <div></div> <div>离开</div> </li> <li> <div></div> <div>忙碌</div> </li> <li> <div></div> <div>请勿打扰</div> </li> <li> <div></div> <div>隐身</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: