首页
所有分类
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获取元素在浏览器中的绝对位置
Jul 24 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
Nov 30 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
js实现无缝滚动图
Feb 22 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
详解redux异步操作实践
Aug 15 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
SANGEAN(1) S400(1) ICF-SW07(1) Grundig(1) H-501(1) ATS-909X(1) S500(1) BCL3000(2) PL990(2) S700(1)
You might like
php $_ENV为空的原因分析
2009/06/01 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP 万年历实现代码
2012/10/18 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
vue中利用simplemde实现markdown编辑器（增加图片上传功能）
2019/04/29 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
Python数据类型详解（三）元祖：tuple
2016/05/08 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python 自动识别并连接串口的实现
2021/01/19 Python
Merrell迈乐澳大利亚网站：购买户外登山鞋
2017/05/28 全球购物
Sneaker Studio乌克兰：购买运动鞋
2018/03/26 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
生日寿宴答谢词
2014/01/19 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
滴水洞导游词
2015/02/10 职场文书
辞职信格式模板
2015/02/27 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
大学新生入学感想
2015/08/07 职场文书
乔迁新居祝福语
2019/11/04 职场文书
创作书写之导游词实用技巧分享（干货）
2019/12/20 职场文书