模仿腾讯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.οnlοad=drag;function drag(){var oTitle=getByClass('login_logo_webqq','loginPanel')[0];// 拖曳oTitle.οnmοusedοwn=fnDown;// 关闭var oClose=document.getElementById('ui_boxyClose');oClose.οnclick=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.οnclick=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].οnmοuseοver=function(){this.style.background='#567';}lis[i].οnmοuseοut=function(){this.style.background='#FFF';}lis[i].οnclick=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.οnclick=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.οnmοusemοve=function(event){event = event || window.event;fnMove(event,disX,disY);}// 释放鼠标document.οnmοuseup=function(){document.οnmοusemοve=null;document.οnmοuseup=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.最后是需要的图片文件

images/boxy_btn.png:

images/login_btn.png:

images/login_window_logo.png:

images/ptlogin.png:

模仿腾讯QQ的web登陆面板相关推荐

仿 qq登录界面 php,js仿腾讯QQ的web登陆界面
用了腾讯QQ也有将近十年了,今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板,然后参考了一些代码,自己模仿,学写了一个. 效果如下: 其中还实现了拖动面板,选择状态的效果下面是具体代码: ...
WebService(腾讯QQ在线状态 WEB 服务)
今天介绍一个简单有意思的小技术: 我们的目的呢就是通过输入QQ号码(String)检测QQ在线状态我们首先打开http://www.webxml.com.cn/zh_cn/web_services. ...
C#模仿腾讯QQ源码下载（附效果图）_张童瑶的博客
该源码是C#语言+SQL Server数据库,开发的一套模仿腾讯QQ的功能,可以实现即时聊天,发送抖动窗口,开通会员,充值Qb,后台管理等等众多功能.源代码里面都有大量注释,都是重量级的代码,学习还是 ...
基于TCP,Socket编程，模仿腾讯QQ界面，使用Java开发的一款网络聊天工具。QQ_Chat
代码下载地址原博客地址 QQ_Chat 基于TCP,Socket编程,模仿腾讯QQ界面,使用Java开发的一款网络聊天工具. (内含报告) 工具: Eclipse.Navicat for MySQL ...
腾讯QQ在线状态 WEB 服务
腾讯QQ在线状态 WEB 服务 Endpoint: http://www.webxml.com.cn/webservices/qqOnlineWebService.asmx Disco: ...
腾讯qq空间GET登陆JS分析
腾讯QQ空间作为腾讯的社交核心产品之一,在登陆的安全设置上没有用变态的技术,都是常规策略.可能是因为该产品内容上的价值对于用户而言重要,但是对于他人来说并不重要. 老规矩首先抓个包试试看看那登陆请求有 ...
闲话腾讯QQ的异地登陆检测所存在的漏洞
异地登陆检测是腾讯安全中心判断QQ是否存在异常行为的一个指标,腾讯对于异地登陆与异常登陆的界定如下: 异地登录是否一定会是异常登录? 异地登录不一定是异常登录,是否为异常由QQ安全中心的检测系统判定. ...
腾讯QQ：异地登陆也被封号，你们是怎么决策的？？？
此文我想放到首页,让更多的人看到,更期待有人能解释一下.希望管理员给开绿灯. 今天真是费解,我的手机号是青岛的,但是我在武汉工作,由于是3G的卡,全国没有漫游,打电话也没多少钱,所以就没换号. 谁知道 ...
windows界面编程之自绘窗体（模仿腾讯qq）
1.建立win32项目 2.在项目属性中设置为使用MFC动态链接库 3.建立CMyApp类,该类从CWinApp派生 4.建立CMainWnd类,可以直接从CFrameWnd类派生,也可以自己注册一 ...
腾讯QQ Web Service 接口
导读: 腾讯QQ在线状态 WEB 服务 Endpoint:http://www.webxml.com.cn/webservices/qqOnlineWebService.asmx Disco:http ...

模仿腾讯QQ的web登陆面板

模仿腾讯QQ的web登陆面板相关推荐

最新文章

热门文章