qq面板/ 好友列表
效果如下：依次为图一---图二----图三----图四
主要实现效果：
点击主标题显示下拉好友，再点击收起下拉好友；鼠标移到好友上背景颜色改变；选中的好友背景颜色也要改变；
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto;
padding:0px;
font-family:微软雅黑;
font-size:14px;
}
.zhu{ width:200px;
height:30px;
text-align:center;
line-height:30px;
vertical-align:middle;
background-color:#03C;
color:white;
}
.zi{ width:200px;
display:none}
.list{ width:198px;
height:30px;
text-align:left;
line-height:30px;
vertical-align:middle;
border-left:1px solid #999;
border-right:1px solid #999;
}
.kg{
margin-left: 30px;
}
.kg1{
margin-left: 10px;
}
.list:hover{
cursor: pointer;
}
#z4{ border-bottom:1px solid #999;}
</style>
</head>
<body>
<div style="width:200px; height:600px; margin-top:30px">
<div class="zhu" onclick="Show('z1')">
我的好友
</div>
<div class="zi" id="z1">
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">张三</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">李四</span></div>
</div>
<div class="zhu" onclick="Show('z2')">
特别关注
</div>
<div class="zi" id="z2">
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">王五</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">陈六</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">刘二</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">韩七</span></div>
</div>
<div class="zhu" onclick="Show('z3')">
陌生人
</div>
<div class="zi" id="z3">
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">王四</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">陈三</span></div>
</div>
<div class="zhu" onclick="Show('z4')">
黑名单
</div>
<div class="zi" id="z4">
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">刘二</span></div>
<div class="list" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0"><span class="kg">韩七</span></div>
</div>
</div>
</body>
<script type="text/javascript">
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("list");
for(var i=0;i<attr.length;i++)
{
attr[i].style.backgroundColor = "white";
attr[i].setAttribute("xz","0");
}
a.setAttribute("xz","1"); //自定义属性，将XZ属性添加给选中的div
a.style.backgroundColor = "#F63";
}
function Bian(a) //作用：鼠标移上背景颜色发生改变
{
var attr = document.getElementsByClassName("list");
for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "white";
}
}
a.style.backgroundColor = "#F63";
}
function Hui(a) //作用是鼠标移走时，背景颜色取消
{
var attr = document.getElementsByClassName("list");
for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "white";
}
}
}
</script>
</html>
注意：
1、自定义函数运用的形参；
2、为什么不用hover属性，而用onmouseover,onmouseout属性：内嵌样式在js中无法读取。
3、this表示：选中的本div
qq面板/ 好友列表的更多相关文章
- web qq 获取好友列表hash算法
web qq 获取好友列表hash算法 在使用web qq的接口进行好友列表获取的时候,需要post一个参数:hash 在对其js文件进行分析之后,发现计算hash的函数位于: http://0.we ...
- XMPP通讯开发-仿QQ显示好友列表和用户组
在 XMPP通讯开发-服务器好友获取以及监听状态变化 中我们获取服务器上的用户好友信息,然后结合XMPP通讯开发-好友获取界面设计 我们将两个合并起来,首先获取用户组,然后把用户组用List ...
- iOS实现类似QQ的好友列表，自由展开折叠（在原来TableView的基础上添加一个字典，一个Button）
//直接代码 只包含 折叠展开字典的处理搭建#import "CFViewController.h" @interface CFViewController ()<UITab ...
- 基于Qt的相似QQ好友列表抽屉效果的实现
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shuideyidi/article/details/30619167 前段时间在忙毕业设计, ...
- Hadoop_24_MapReduce实现QQ共同好友
1.社交粉丝数据分析: 以下是qq的好友列表数据,冒号前是一个用户,冒号后是该用户的所有好友(数据中的好友关系是单向的) A:B,C,D,F,E,O B:A,C,E,K C:F,A,D,I D:A,E ...
- OS开发UI篇—使用UItableview完成一个简单的QQ好友列表
本文转自:http://www.cnblogs.com/wendingding/p/3763330.html 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableVi ...
- iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（一）
iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表(一) 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController // ...
- iOS开发UI篇—使用UItableview完成一个简单的QQ好友列表（二）
一.实现效果 二.实现代码 1.数据模型部分 YYQQGroupModel.h文件 // // YYQQGroupModel.h // 02-QQ好友列表(基本数据的加载) / ...
- [iOS基础控件 - 6.9.3] QQ好友列表Demo TableView
A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组 code so ...
随机推荐
- JAVA 在程序中存储和修改信息
1.语句和表达式 计算机程序是一组告诉计算机什么的指令,每一个指令称为语句. 2.指定变量类型 变量名.变量存储的信息类型 整型int(-2.14*109~2.14*109).浮点型float(38位 ...
- MRC、ARC内存管理机制
MRC下,oc内存管理遵循"谁创建.谁释放.谁引用.谁管理"的机制,当创建或引用一个对象时,需要向她发送alloc,copy,retain消息,当释放该对象时需要发送release ...
- Asp.Net MVC学习总结（三）——过滤器你怎么看？
一.过滤器简介 1.1.理解什么是过滤器 1.过滤器(Filters)就是向请求处理管道中注入额外的逻辑.提供了一个简单而优雅的方式来实现横切关注点. 2.所谓的过滤器(Filters),MVC框架里 ...
- Java设计模式之《观察者模式》及应用场景
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6513651.html 观察者模式,又可以称之为发布-订阅模式,观察者,顾名思义,就是一个监 ...
- （七）javascript中的数组
一. 一维数组 1.1 声明数组 var 数组名=new Array(数组大小); 1.2 添加元素 <script> var a=new Array(3); a[0]="张三 ...
- wemall app商城源码中ScrollView中嵌套ListView主要代码
很多时间我们在scorllview中嵌入listview的时候,都只能看到listview显示一行数据,而我们的要求是显示多行,即我们数据的行数, 当ListView的高度设定一定的值时,ListVi ...
- node c++多线程插件 第一天 c++线程相关函数
因为不会c++,今天主要是学习了一下c++的东西,感觉非常麻烦. 目前知道了c++里创建线程createThread,返回一个内核对象(HANDLE),我的理解是,c++中系统层面上的操作(线程,文件 ...
- 1067: [SCOI2007]降雨量
1067: [SCOI2007]降雨量 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 2148 Solved: 554[Submit][Status] ...
- Web API框架学习——路由（一）
HttpConfiguration(ASP.NET Web API管道的配置是通过HttpConfiguration来完成) : 包括路由注册在内的对整个ASP.NET Web API管道的配置是通过 ...
- （3）简单说说java中的异常体系
java异常体系 |--Throwable 实现类描述java的错误和异常 一般交由硬件处理 |--Error(错误)一般不通过代码去处理,一般由硬件保护 |--Exception(异常) |--Ru ...