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 ...
随机推荐
- 每天一个linux命令(32)--/etc/group文件详解
Linux /etc/group 文件与 /etc/passwd 和/etc/shadow 文件都是有关于系统管理员对用户和用户组管理时相关的文件.Linux /etc/group 文件是有关于系统管 ...
- PHP字符串三种定义方式
PHP的字符串有三种定义方式:单引号 .双引号 .定界符 1.单引号:指定一个简单字符串的最简单的方法是用单引号(字符 ')括起来. 在被单引号括起来的字符串中,要再表示一个单引号,需要用反斜线(\ ...
- C#实体类生成XML与XML Schema文档
一.实体类生成XML private void CreateXML() { Type[] objType = DBEntityRegst(); foreach (var item in objType ...
- php+redis 简易的实现文章发布系统（用户投票系统）
/** * @data 文章发布 * 文章详情散列表中递增ID,讲文章发布者ID写入投票用户集合中,设置投票时间为一周 * 讲文章内容写入文章散列中,讲文章写入文章评分有序集合和文章发布有序集合中 * ...
- shell笔记整理1---vim编译器基础应用（参考鸟哥）
1.linux中的配置文件都已是以ASCII的纯文本的形式存在 2.vim文本编译器. 一般模式:用vi打开的一个文件直接进入的就是一般模式,这个模式可以移动光标和删除字符,复制粘贴等,但是不能比那几 ...
- 基于 Koa平台Node.js开发的KoaHub.js的模板引擎代码
koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-ha ...
- 挂接命令(mount） 【转】
收藏些文章,以后可能有用,文章出自:http://tutu.spaces.eepw.com.cn/articles/article/item/70737 挂接命令(mount) 首先,介绍一下挂接(m ...
- CCF 201609-4 交通规划
问题描述 试题编号: 201609-4 试题名称: 交通规划 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 G国国王来中国参观后,被中国的高速铁路深深的震撼,决定为自己的国家 ...
- Webpack单元测试，e2e测试
此篇文章是续 webpack多入口文件.热更新等体验,主要说明单元测试与e2e测试的基本配置以及相关应用. 一.单元测试 实现单元测试框架的搭建.es6语法的应用.以及测试覆盖率的引入. 1. 需要安 ...
- KVC与KVO理解
转载:https://magicalboy.com/kvc_and_kvo/ KVC 与 KVO 理解 KVC 与 KVO 是 Objective C 的关键概念,个人认为必须理解的东西,下面是实例讲 ...