首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js仿腾讯QQ的web登陆界面

Posted in Javascript onAugust 19, 2016

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

效果如下： 

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

js仿腾讯QQ的web登陆界面

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

js仿腾讯QQ的web登陆界面

- Author -

yesz12358

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
常用js脚本
Dec 03 Javascript
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
jQuery)扩展jQuery系列之一 模拟alert，confirm（一）
Dec 04 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
基于WebUploader的文件上传js插件
Aug 19 #Javascript
JS获取checkbox的个数简单实例
Aug 19 #Javascript
JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 #Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 #Javascript
浅谈js中test()函数在正则中的使用
Aug 19 #Javascript
javascript设计模式Constructor（构造器）模式
Aug 19 #Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 #Javascript
Quartz(1) K8s(1) Hive(5) NTP(1) RestTemplate(1) SandBox(1) calc(1) Windows Server(4) HttpClient(1) Windows Server 2022(3)
You might like
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
javascript 基础篇3 类，回调函数，内置对象，事件处理
2012/03/14 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
深入了解python列表（LIST）
2020/06/08 Python
美国一家著名的儿童鞋制造商：Stride Rite
2017/01/02 全球购物
勿忘国耻9.18演讲稿（经典篇）
2014/09/14 职场文书
旷工辞退通知书
2015/04/17 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技