首页
所有分类
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 css样式操作代码（批量操作）
Oct 09 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
localResizeIMG先压缩后使用ajax无刷新上传（移动端）
Aug 11 Javascript
微信小程序 两种滑动方式（横向滑动，竖向滑动）详细及实例代码
Jan 13 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 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
GTID(1) timestamp(1) 临时表(1) ECharts(3) 表变量(1) mixin(1) 排序失效(1) ip连接(1) 重复数据(2) 游标(1)
You might like
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php中memcache 基本操作实例
2015/05/17 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
python ETL工具 pyetl
2020/06/07 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
印度尼西亚在线时尚购物网站：ZALORA印尼
2016/08/02 全球购物
入党自我鉴定范文
2013/10/04 职场文书
大二学期个人自我评价
2014/01/13 职场文书
有趣的广告词
2014/03/18 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
会计稽核岗位职责
2015/04/13 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
我爱我班主题班会
2015/08/13 职场文书