当前位置：Gxlcms > JavaScript > js仿腾讯QQ的web登陆界面

js仿腾讯QQ的web登陆界面

时间：2021-07-01 10:21:17 帮助过：3人阅读

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

效果如下： 

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

1.index.html 

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.   <title>拖动</title>
  5.   <link href="css/main.css" rel="stylesheet" />
  6.   <script src="js/drag.js"></script>
  7. </head>
  8. <body>
  9.   <div class="loginPanel" id="loginPanel">
  10.      <div style="position: relative; z-index: 1;">
  11.       <div class="ui_boxyClose" id="ui_boxyClose"></div>
  12.     </div>
  13.     <div class="login_logo_webqq"></div>
  14.  
  15.     <div class="inputs">
  16.       <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>
  17.       <div class="sign-input"><span>密　码：</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
  18.     </div>
  19.     <div class="bottomDiv">
  20.       <div class="btn" style="float: left"></div>
  21.       <div>
  22.         <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态">
  23.           <div id="loginStateShow" class="login-state-show online">状态</div>
  24.           <div class="login-state-down">下</div>
  25.           <div class="login-state-txt" id="login2qq_state_txt">在线</div>
  26.     <ul id="loginStatePanel" class="statePanel login-state" style="display: none">
  27.     <li id="online" class="statePanel_li">
  28.       <div class="stateSelect_icon online"></div>
  29.       <div class="stateSelect_text">我在线上</div>
  30.     </li>
  31.     <li id="callme" class="statePanel_li">
  32.       <div class="stateSelect_icon callme"></div>
  33.       <div class="stateSelect_text">Q我吧</div>
  34.     </li>
  35.     <li id="away" class="statePanel_li">
  36.       <div class="stateSelect_icon away"></div>
  37.       <div class="stateSelect_text">离开</div>
  38.     </li>
  39.     <li id="busy" class="statePanel_li">
  40.       <div class="stateSelect_icon busy"></div>
  41.       <div class="stateSelect_text">忙碌</div>
  42.     </li>
  43.     <li id="silent" class="statePanel_li">
  44.       <div class="stateSelect_icon silent"></div>
  45.       <div class="stateSelect_text">请勿打扰</div>
  46.     </li>
  47.     <li id="hidden" class="statePanel_li">
  48.       <div class="stateSelect_icon hidden"></div>
  49.       <div class="stateSelect_text">隐身</div>
  50.     </li>
  51.   </ul>
  52.         </div>
  53.       </div>
  54.     </div>
  55.   </div>
  56. </body>
  57. </html>

 2.css/main.css: 

  1.  .loginPanel {
  2.       width: 380px;
  3.       height: 247px;
  4.       left: 400px;
  5.       top: 120px;
  6.       position: absolute;
  7.       border: 1px solid #ccc;
  8.       background: #f6f6f6;
  9.       -moz-border-radius: 10px;
  10.       -webkit-border-radius: 10px;
  11.       border-radius: 10px;
  12.       -moz-box-shadow: 0 0 8px #000;
  13.       -webkit-box-shadow: 0 0 8px #000;
  14.       box-shadow: 0 0 8px #000;
  15.     }
  16.     .login_logo_webqq {
  17.       background: url('../images/login_window_logo.png') no-repeat -210px -0px;
  18.       margin-left: 100px;
  19.       margin-top: 10px;
  20.       width: 200px;
  21.       height: 44px;
  22.       cursor: move;
  23.     }
  24.     .inputs {
  25.       font: bold 15px arial;
  26.       margin-left: 80px;
  27.       margin-top: 30px;
  28.     }
  29.       .inputs .sign-input {
  30.         padding-bottom: 20px;
  31.       }
  32.         .inputs .sign-input input {
  33.           width: 170px;
  34.           border: 1px #ccc solid;
  35.           color: #868686;
  36.           font-size: 16px;
  37.           padding: 2px;
  38.           -moz-border-radius: 10px;
  39.           -webkit-border-radius: 10px;
  40.           -khtml-border-radius: 10px;
  41.           -border-radius: 10px;
  42.           outline: none;
  43.         }
  44.     .btn {
  45.       background: url("../images/login_btn.png") no-repeat -111px 0;
  46.       width: 111px;
  47.       height: 36px;
  48.       border: 0;
  49.       text-align: center;
  50.       line-height: 20px;
  51.       color: #0C4E7C;
  52.       cursor: pointer;
  53.       margin-left: 14px;
  54.     }
  55.     .login-state-trigger {
  56.       cursor: pointer;
  57.       display: block;
  58.       float: left;
  59.       height: 16px;
  60.       overflow: hidden;
  61.       width: 120px;
  62.       margin: 4px 0 0 0;
  63.     }
  64.     .login-state-trigger2 {
  65.       margin: 10px 0 0 20px;
  66.     }
  67.     .login-state-down {
  68.       background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent;
  69.       float: left;
  70.       height: 6px;
  71.       margin-top: 5px;
  72.       overflow: hidden;
  73.       text-indent: -999em;
  74.       width: 7px;
  75.     }
  76.     .login-state-show {
  77.       float: left;
  78.       height: 14px;
  79.       overflow: hidden;
  80.       text-indent: -999em;
  81.       width: 14px;
  82.       margin: 1px 4px 0 0;
  83.     }
  84.     .login-state-txt {
  85.       float: left;
  86.       margin-left: 5px;
  87.       font-size: 12px;
  88.       >line-height:18px!important;
  89.     }
  90.     .login-state .callme {
  91.       background: url("../images/ptlogin.png") -72px 0 no-repeat;
  92.     }
  93.     .login-state .online {
  94.       background: url("../images/ptlogin.png") 0 0 no-repeat;
  95.     }
  96.     .login-state .away {
  97.       background: url("../images/ptlogin.png") -18px 0 no-repeat;
  98.     }
  99.     .login-state .busy {
  100.       background: url("../images/ptlogin.png") -36px 0 no-repeat;
  101.     }
  102.     .login-state .silent {
  103.       background: url("../images/ptlogin.png") -108px 0 no-repeat;
  104.     }
  105.     .login-state .hidden {
  106.       background: url("../images/ptlogin.png") -54px 0 no-repeat;
  107.     }
  108.     .statePanel {
  109.       display: none;
  110.       position: absolute;
  111.       right: 68px;
  112.       top: 193px;
  113.       z-index: 10;
  114.       margin: 0;
  115.       border-width: 1px;
  116.       border-style: solid;
  117.       border-color: #ccc #6a6a6a #666 #cdcdcd;
  118.       padding: 0;
  119.       width: 100px;
  120.       height: 133px;
  121.       overflow: hidden;
  122.       background: white;
  123.       font-size: 12px;
  124.       line-height: 1.5;
  125.     }
  126.       .statePanel .statePanel_li {
  127.         display: block;
  128.         float: left;
  129.         margin: 0;
  130.         padding: 3px 0;
  131.         width: 100px;
  132.         height: 16px;
  133.         line-height: 16px;
  134.         overflow: hidden;
  135.         zoom: 1;
  136.         cursor: pointer;
  137.       }
  138.     .stateSelect_icon {
  139.       float: left;
  140.       margin: 2px 0 0 5px;
  141.       width: 14px;
  142.       height: 14px;
  143.       overflow: hidden;
  144.     }
  145.     .stateSelect_text {
  146.       margin: 0 0 0 22px;
  147.     }
  148.     .bottomDiv {
  149.       margin-left: 70px;
  150.     }
  151.     .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: 

  1. function getByClass(clsName,parent){
  2.  var oParent=parent?document.getElementById(parent):document,
  3.    eles=[],
  4.    elements=oParent.getElementsByTagName('*');
  5.  for(var i=0,l=elements.length;i<l;i++){
  6.   if(elements[i].className==clsName){
  7.    eles.push(elements[i]);
  8.   }
  9.  }
  10.  return eles;
  11. }
  12. window.onload=drag;
  13. function drag(){
  14.   var oTitle=getByClass('login_logo_webqq','loginPanel')[0];
  15.   // 拖曳
  16.   oTitle.onmousedown=fnDown;
  17.   // 关闭
  18.   var oClose=document.getElementById('ui_boxyClose');
  19.   oClose.onclick=function(){
  20.    document.getElementById('loginPanel').style.display='none';
  21.   }
  22.   // 切换状态
  23.   var loginState=document.getElementById('loginState'),
  24.     stateList=document.getElementById('loginStatePanel'),
  25.     lis=stateList.getElementsByTagName('li'),
  26.     stateTxt=document.getElementById('login2qq_state_txt'),
  27.     loginStateShow=document.getElementById('loginStateShow');
  28.   loginState.onclick=function(e){
  29.    e = e || window.event;
  30.    if(e.stopPropagation){
  31.      e.stopPropagation();
  32.    }else{
  33.      e.cancelBubble=true;
  34.    }
  35.    stateList.style.display='block';
  36.   }
  37.   // 鼠标滑过、离开和点击状态列表时
  38.   for(var i=0,l=lis.length;i<l;i++){
  39.    lis[i].onmouseover=function(){
  40.     this.style.background='#567';
  41.    }
  42.    lis[i].onmouseout=function(){
  43.     this.style.background='#FFF';
  44.    }
  45.    lis[i].onclick=function(e){
  46.     e = e || window.event;
  47.     if(e.stopPropagation){
  48.      e.stopPropagation();
  49.     }else{
  50.      e.cancelBubble=true;
  51.     }
  52.     var id=this.id;
  53.     stateList.style.display='none';
  54.     stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
  55.     loginStateShow.className='';
  56.     loginStateShow.className='login-state-show '+id;
  57.    }
  58.   }
  59.   document.onclick=function(){
  60.    stateList.style.display='none';
  61.   }
  62. }
  63. function fnDown(event){
  64.  event = event || window.event;
  65.  var oDrag=document.getElementById('loginPanel'),
  66.    // 光标按下时光标和面板之间的距离
  67.    disX=event.clientX-oDrag.offsetLeft,
  68.    disY=event.clientY-oDrag.offsetTop;
  69.  // 移动
  70.  document.onmousemove=function(event){
  71.   event = event || window.event;
  72.   fnMove(event,disX,disY);
  73.  }
  74.  // 释放鼠标
  75.  document.onmouseup=function(){
  76.   document.onmousemove=null;
  77.   document.onmouseup=null;
  78.  }
  79. }
  80. function fnMove(e,posX,posY){
  81.  var oDrag=document.getElementById('loginPanel'),
  82.    l=e.clientX-posX,
  83.    t=e.clientY-posY,
  84.    winW=document.documentElement.clientWidth || document.body.clientWidth,
  85.    winH=document.documentElement.clientHeight || document.body.clientHeight,
  86.    maxW=winW-oDrag.offsetWidth-10,
  87.    maxH=winH-oDrag.offsetHeight;
  88.  if(l<0){
  89.   l=0;
  90.  }else if(l>maxW){
  91.   l=maxW;
  92.  }
  93.  if(t<0){
  94.   t=10;
  95.  }else if(t>maxH){
  96.   t=maxH;
  97.  }
  98.  oDrag.style.left=l+'px';
  99.  oDrag.style.top=t+'px';
  100. }

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！