js仿腾讯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') 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;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.最后是需要的图片文件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持全福编程网。