首页
所有分类
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 相关文章推荐
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
js模拟微博发布消息
Feb 23 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传（上）
Apr 21 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
微信小程序实现animation动画
Jan 26 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
基于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
内置模块(1) 限流(2) 限速(1) 数据库卡死(1) 全局锁(1) update(2) 递归(1) IP(1) tcp/ip(1) 备份(2)
You might like
PHP的简易冒泡法代码分享
2012/08/28 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JavaScript函数详解
2015/02/27 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
python批量处理文件或文件夹
2020/07/28 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
毕业生的自我评价分享
2013/12/18 职场文书
四年级科学教学反思
2014/02/10 职场文书
学校安全防火方案
2014/06/07 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
校本培训个人总结
2015/02/28 职场文书
公司催款律师函
2015/05/27 职场文书
龙猫观后感
2015/06/09 职场文书
图书馆义工感想
2015/08/07 职场文书
Win11怎么启动任务管理器？Win11启动任务管理器的几种方法
2021/11/23 数码科技
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android