js仿腾讯QQ的web登陆界面

用了腾讯QQ也有将近十年了，今天心血来潮想模仿腾讯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.最后是需要的图片文件

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

赞 (0)

相关推荐

  • 深入javascript json QQ网页登陆

    深入javascript json QQ网页登陆

    效果图 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js仿QQ中对联系人向左滑动、滑出删除按钮的操作

    js仿QQ中对联系人向左滑动、滑出删除按钮的操作

    本文实例为大家分享实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

  • WebQQ最新登陆协议的用法

    本文实例讲述了WebQQ最新登陆协议的用法.分享给大家供大家参考.具体分析如下: WebQQ协议更新后,原登陆算法等信息改变,导致很多朋友无法正常登陆,本站发布了一些与WebQQ最新登陆协议相关的文章,有因为未发布Demo,一些朋友会加Q来问,是否适应最新的WebQQ,本文就做一个小的Demo来供大家测试. 声明: 1.本Demo做的比较简单,未对密码及验证码等对错做验证,只是做登陆演示. 2.QQ是个比较隐私的东西,那么请您用测试号登陆本软件,先小人后君子吧. 本站与最新WebQQ登陆协议相关

  • Android仿QQ登陆窗口实现原理

    Android仿QQ登陆窗口实现原理

    今天根据腾讯qq,我们做一个练习,来学习如何制作一个漂亮的布局.首先看一下官方图片 还是一个启动画面,之后进入登录页面,导航页面就不介绍了,大家可以参考微信的导航页面.首先程序进入SplashActivity,就是启动页面,Activity代码如下: 复制代码 代码如下: package com.example.imitateqq; import android.app.Activity; import android.content.Intent; import android.os.Bund

  • C++获取本机登陆过的QQ号码示例程序

    C++获取本机登陆过的QQ号码示例程序

    先看效果图,代码在下面 复制代码 代码如下: // FileName: GetQQ.h #pragma once #include <vector> class GetQQ{private:    std::vector<CString> m_qqNum; public:    GetQQ();    ~GetQQ();public: // 获取QQ号码    std::vector<CString> Init(void);}; 复制代码 代码如下: // FileNa

  • 微信QQ的二维码登录原理js代码解析

    微信QQ的二维码登录原理js代码解析

    在很多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗就不说了),二维码验证,多终端辅助授权应用开始多起来,这里先说下啥是二维码,其实二维码就是存了二进制数据的黑白图片,当出现要求二维码登录的时候,服务器会生成一条临时的唯一的二维码信息,发送到客户端以二维码(图片)的形式写入到网页,然后你就会看到统一的四个方形的二维码,如果做的好这个二维码信息应该是有时效的,这里暂且不考虑这些,就简单的微信登录作为例子看看吧: 首先说下整个授权流程: 在客户端网页中会不断向服

  • qq防止别人登陆如何禁止别人登陆qq

    qq防止别人登陆如何禁止别人登陆qq

    即时通讯软件QQ拥有越来越多的用户,而QQ号也成为人们继手机号之后又一主要联系方式.但如果你不想让你同事.同学.亲戚和朋友利用你机器中的QQ神聊瞎侃和传输不良信息,不妨试试如下方法: 当然,如果你是在公司局域网禁止别人qq登录,限制上班qq聊天的行为,则推荐你使用专业的网络管理软件--聚生网管(下载地址:http://www.grabsun.com/wangguan.html)就可以了,你只需要将聚生网管安装在局域网一台电脑上,比如你自己或者经理的电脑上,就可以扫描到局域网所有电脑,点点鼠标就可

  • 禁止指定QQ号登录的bat代码(前提这个用户在这台机器登陆过)

    复制代码 代码如下: @echo off color f0 mode con cols=50 lines=20 echo *****前提是此QQ号在本机登录过**** set /p qqid=请输入要禁止登录的QQ号: for %%i in (c d e f g ) do ( if not exist %%i: exit for /f "tokens=*" %%j in ('dir /ad /b /s "%%i:\%qqid: =%"') do ( if exist

  • php curl登陆qq后获取用户信息时证书错误

    今晚开放ecmall商城的QQ登陆功能,在回调时产生错误,file_get_contents函数执行时,没有抓取到正确的信息,于是改用curl,但是提示证书错误. 在网上找到了解决方法,就是去掉证书认证. 复制代码 代码如下: curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); 该种方法可行. 网上还有另外一种说法,就是使用 复制代码 代码如下: cur

  • js仿腾讯QQ的web登陆界面

    js仿腾讯QQ的web登陆界面

    用了腾讯QQ也有将近十年了,今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板,然后参考了一些代码,自己模仿,学写了一个. 效果如下: 其中还实现了拖动面板,选择状态的效果 下面是具体代码: 1.index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>拖动</title> <link href=&q

  • JS 仿腾讯发表微博的效果代码

    JS 仿腾讯发表微博的效果代码

    最近2天研究了下 腾讯发表微博的效果 特此来分享下,效果如下: 在此分享前 来谈谈本人编写代码的习惯,很多人会问我既然用的是jquery框架 为什么写的组件不用Jquery那种形式?我当时回答的是:每个人编写代码有每个人的习惯.但是我更想表达的是:这种编码个人觉得 有一个很大的优点,我不是非常依赖于Jquery框架,因为不同的公司有不同的框架 比如在淘宝用的kissy框架 在支付宝用的是支付宝框架 在百度用的是百度框架 在腾讯有腾讯的前端js框架 假如我的编写代码太依赖于jquery 那假如其他

  • javascript实现的仿腾讯QQ窗口抖动效果代码

    javascript实现的仿腾讯QQ窗口抖动效果代码

    振动 function zd(u){ var a=['top','left'],b=0; u=setInterval(function(){ document.getElementById('win').style[a[b%2]]=(b++)%415){clearInterval(u);b=0} },32) } 欢迎访问我们,www.jb51.net [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Android仿腾讯QQ实现滑动删除 附源码下载

    Android仿腾讯QQ实现滑动删除 附源码下载

    看了很多大神们的文章,感觉受益良多,也非常欣赏大家的分享态度,所以决定开始写Blog,给大家分享自己的心得. 先看看效果图: 本来准备在ListView的每个Item的布局上设置一个隐藏的Button,当滑动的时候显示.但是因为每次只要存在一个Button,发现每个Item上的Button相互间不好控制.所以决定继承ListView然后结合PopupWindow. 首先是布局文件: delete_btn.xml:这里只需要一个Button <?xml version="1.0"

  • JS实现仿腾讯微博无刷新删除微博效果代码

    JS实现仿腾讯微博无刷新删除微博效果代码

    本文实例讲述了JS实现仿腾讯微博无刷新删除微博效果代码.分享给大家供大家参考.具体如下: 这里演示JS仿腾讯微博无刷新删除效果,将显示在微博列表里的内容删除,运用AJAX技术,无刷新删除微博的内容,参考性强,希望对初学AJAX的朋友有所帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-sina-web-ajax-del-info-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • jQuery制作仿腾讯web qq用户体验桌面

    jQuery制作仿腾讯web qq用户体验桌面

    jquery ui制作仿腾讯web qq用户界面,酷炫个性的desktop桌面特效展示支持各大主流浏览器IE6以上.jQuery用户体验设计,web qq桌面十分动感酷炫. 查看演示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

  • JS仿QQ好友列表展开、收缩功能(第二篇)

    JS仿QQ好友列表展开、收缩功能(第二篇)

    在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: <script> window.onload = function(){ var list = document.getElementById('list'); var ah2 = list.getElementsByTagName('h2'); var uls = list.getElementsByTagName('ul'); var lis = null;//用于下面的存储 var arrl

  • JS仿QQ好友列表展开、收缩功能(第一篇)

    JS仿QQ好友列表展开、收缩功能(第一篇)

    效果图如下所示: html: <ul id="list"> <li class="lis"> <h2>我的好友</h2> <ul> <li>张三</li> <li>李四</li> ... </ul> </li> <li class="lis"> <h2>企业好友</h2> <

  • jQuery实现仿腾讯迷你首页选项卡效果代码

    jQuery实现仿腾讯迷你首页选项卡效果代码

    本文实例讲述了jQuery实现仿腾讯迷你首页选项卡效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的选项卡,清爽无修饰版,仿腾讯的迷你首页.选项卡的前后可以有一个控件箭头,点击这两个箭头可控件选项卡向左.向右滚动,在有限的网页空间内布局更多的内容成为可能,相信你会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-t-tencent-index-style-nav-codes/ 具体代码如下: <!DOCT

  • 漂亮的jquery提示效果(仿腾讯弹出层)

    漂亮的jquery提示效果(仿腾讯弹出层)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Emula

随机推荐