qq面板（仿版，未完待续中。。。。）---2017-04-24
主要实现效果：
1、点击对话，显示对话；点击联系人，显示联系人
2、在联系人界面：
实现好友列表的展开与折叠；（图12）
实现鼠标移到好友列表上的背景颜色的变化；（图3）
选中的好友背景颜色改变（图4）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#mid{
height:525px;
width:300px;
position: relative;
background-color: greenyellow;
} #menu{
width:300px;
height:30px;
}
.list{ width:75px;
height:30px;
float:left;
text-align:center;
line-height:30px;
vertical-align:middle;
}
.list:hover{
cursor: pointer;
} .zhu{
width: 300px;
height: 30px;
text-align: left;
vertical-align: middle;
line-height: 30px;
}
.zhu:hover{
cursor: pointer;
}
.zi{
width: 300px;
display: none; }
.lb{
height: 30px;
width: 300px; text-align: left;
vertical-align: middle;
line-height: 30px; }
.xm{
margin-left: 30px;
} .nr{
width:300px;
height:495px;
text-align:center;
line-height:200px;
vertical-align:middle;
position: relative;
}
</style>
</head>
<body>
<div id="mid">
<div id="menu">
<div class="list" style="background-color:gold" onclick="Show('d1')">会话</div>
<div class="list" style="background-color:gainsboro" onclick="Show('d2')">联系人</div>
<div class="list" style="background-color:greenyellow" onclick="Show('d3')">群聊</div>
<div class="list" style="background-color:burlywood" onclick="Show('d4')">空间</div>
</div>
<div id="d1" class="nr" style="background-color:gold">
对话
</div> <div id="d2" class="nr" style="background-color:gainsboro; display:none;"> <div class="zhu" onclick="show('a1')"> 我的好友</div>
<div class="zi" id="a1">
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">陈一</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">王二</span></div>
</div>
<div class="zhu" onclick="show('a2')"> 特别关注</div>
<div class="zi" id="a2">
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">张三</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">李四</span></div>
</div>
<div class="zhu" onclick="show('a3')"> 陌生人</div>
<div class="zi" id="a3">
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">王五</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">老六</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">陈七</span></div>
</div>
<div class="zhu" onclick="show('a4')"> 黑名单</div>
<div class="zi" id="a4">
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">王二</span></div>
<div class="lb" onclick="Xuan(this)" xz="0" onmouseover="Bian(this)" onmouseout="Hui(this)"><span class="xm">王二</span></div>
</div> </div> <div id="d3" class="nr" style="background-color:greenyellow; display:none">
群聊
</div>
<div id="d4" class="nr" style="background-color:burlywood; display:none">
空间
</div>
</div>
</body>
</html>
<script type="text/javascript"> function Show(id)
{
//隐藏所有
var attr = document.getElementsByClassName("nr");
for(var i=0;i<attr.length;i++)
{
attr[i].style.display = "none";
}
//显示当前的
document.getElementById(id).style.display = "block";
} //实现列表的展开与叠起
function show(id)
{
var z=document.getElementById(id);
if (z.style.display=="block")
{
z.style.display="none";
}
else{
z.style.display="block";
}
}
//展开后列表背景颜色变为白色，选中好友变为橘黄色
function Xuan(a)
{
var attr = document.getElementsByClassName("lb"); for(var i=0;i<attr.length;i++)
{
attr[i].style.backgroundColor = "white";
attr[i].setAttribute("xz","0");
}
a.setAttribute("xz","1");
a.style.backgroundColor = "orange";
} //设置鼠标移动上的颜色变化
function Bian(a)
{
var attr = document.getElementsByClassName("lb"); for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "white";
}
} a.style.backgroundColor = "lightblue";
}
//鼠标离开后颜色回到原先的背景颜色
function Hui(a)
{
var attr = document.getElementsByClassName("lb"); for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "white";
}
}
}
</script>
还需完善：
1、对话列表，群聊等未布局
2、什么时候能与数据库对接呢？聊天功能未实现？（期待聊天功能。）
qq面板（仿版，未完待续中。。。。）---2017-04-24的更多相关文章
- 省钱版----查找 IoT 设备TTL线序__未完待续
作者:仙果 原文来自:省钱版—-查找 IoT 设备TTL线序 省钱版----查找 IoT 设备TTL线序__未完待续 缘由 在IoT固件调试分析的过程中,建议首先在IoT设备的板子上焊接调试线,这是能 ...
- Java开发中的23+2种设计模式学习个人笔记（未完待续）
注:个人笔记 一.设计模式分三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模 ...
- Reading | 《数字图像处理原理与实践（MATLAB版）》（未完待续）
目录 一.前言 1.MATLAB or C++ 2.图像文件 文件头 调色板 像素数据 3.RGB颜色空间 原理 坐标表示 4.MATLAB中的图像文件 图像类型 image()函数 imshow() ...
- [python]爬代理ip v2.0(未完待续）
爬代理ip 所有的代码都放到了我的github上面, HTTP代理常识 HTTP代理按匿名度可分为透明代理.匿名代理和高度匿名代理. 特别感谢:勤奋的小孩 在评论中指出我文章中的错误. REMOTE_ ...
- Go web编程学习笔记——未完待续
1. 1).GOPATH设置 先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...
- AutoMapper介绍（未完待续、部分没实现）
实体间转换工具.其实也可以用Json来实现同名属性.异名属性(用JsonProperty指明)的自动转换 最新版本6.11 需要使用vs2013以上.vs2012下载新版 nuget会遇到问题.只能旧 ...
- git安装与使用，未完待续... ...
目录 一.git概念 二.git简史 三.git的安装 四.git结构 五.代码托管中心-本地库和远程库的交互方式 六.初始化本地仓库 七.git常用命令 1.add和commit命令 2.sta ...
- javascript有用小功能总结(未完待续)
1)javascript让页面标题滚动效果 代码如下: <title>您好,欢迎访问我的博客</title> <script type="text/javasc ...
- ASP.NET MVC 系列随笔汇总[未完待续……]
ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...
随机推荐
- SpringBoot之旅 -- SpringBoot 项目健康检查与监控
前言 You build it,You run it, 当我们编写的项目上线后,为了能第一时间知晓该项目是否出现问题,常常对项目进行健康检查及一些指标进行监控. Spring Boot-Actuato ...
- SQL server 数据库——数学函数、字符串函数、转换函数、时间日期函数
数学函数.字符串函数.转换函数.时间日期函数 1.数学函数 ceiling()--取上限 select ceiling(oil) as 油耗上限 from car floor()--取下限 sele ...
- node c++多线程插件 第一天 c++线程相关函数
因为不会c++,今天主要是学习了一下c++的东西,感觉非常麻烦. 目前知道了c++里创建线程createThread,返回一个内核对象(HANDLE),我的理解是,c++中系统层面上的操作(线程,文件 ...
- MySQL基准测试（benchmark）
基准测试是唯一方便有效的.可以学习系统在给定的工作负载下会发生什么的方法.基准测试可以观察系统在不同压力下的行为,评估系统的容量,掌握哪些是重要的变化,或者观察系统如何处理不同的数据. 验证基于系统的 ...
- 安装node配置环境变量，解决某组件（如cordova，webpack等）“不是内部命令”问题
安装cordova之后,控制台输入cordova -v之后,一直提示不是内部命令,查了很久入了很多坑之后,终于配置正确~记录一下~ 1.安装node,我的安装路径为D:\frontend\nodejs ...
- 浅谈！SQL语句中LEFT JOIN ON WHERE和LEFT JOIN ON AND的区别
今天的工作学习之路是一个数据库的小知识,当时没有区分出所以然,特此记录分享一下子. 众所周知,数据库的表都是单独存在的,但是当我们进行联合查询(多表查询)时,我们获得数据库返回的值时就好像在一张表里一 ...
- iOS开发之Copy & MutableCopy及深复制 & 浅复制
1.使用copy或mutableCopy方法可以创建一个对象的副本. copy: (1)需要实现NSCoppying协议 (2)创建的是不可变副本(如NSString.NSArray.NSDictio ...
- 【前端调试手机页面】分享一款便捷的调试工具--spy-debugger
spy-debugger : 微信调试,各种WebView样式调试.手机浏览器的页面真机调试.便捷的远程调试手机页面.抓包工具,支持:HTTP/HTTPS,无需USB连接设备. github地址: ...
- jQuery插件之validation插件
前面的话 最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation.Validation是历史最悠久 ...
- 如何用 JavaScript 下载文件
简介 我们知道,下载文件是一个非常常见的需求,但由于浏览器的安全策略的限制,我们通常只能通过一个额外的页面,访问某个文件的 url 来实现下载功能,但是这种用户体验非常不好. 幸好,HTML 5 里面 ...