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 ...
随机推荐
- HttpHeplp 公共类 HttpWebRequest
public class HttpHelp { public CookieContainer CookieContainer { get; set; } public CookieCollection ...
- PDO(PHP Data Object)数据访问抽象层
1.可以访问其它数据库2.具有事务功能3.带有预处理语句功能(防止SQL注入攻击) 访问数据库 PDO::__construct ( string $dsn [, string $username [ ...
- Easyui _treegrid 动态加载子节点
<table id="dg" class="easyui-treegrid" title="数据字典列表" data-options= ...
- x01.Weiqi.13: 鼎力推荐
鼎力推荐 : 点击后即可观看,小伙子讲的很有深度. 说到深度,自然离不了深度学习.AlphaGo 的横空出世,似乎很有学习的必要. MuGo: 点击下载后,发现是 python,自然免不了一番学习,好 ...
- 强大的健身软件——Keep
Keep是一款具有社交属性的健身工具类产品.用户可利用碎片化的时间,随时随地选择适合自己的视频健身课程,进行真人同步训练.完成后还可以"打卡"晒成就. 你可根据器械.部位.难度 ...
- image图片拉伸
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #1d9421 } p.p2 ...
- MyBastis初次环境配置讲解
MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .20 ...
- wp8数据存储--独立存储文件 【转】
出自 : http://www.cnblogs.com/MyBeN/p/3339019.html 文章篇幅有点大,建议去源网看看 1.调用手机的独立存储 例如:IsolatedStorageFile ...
- 图文：eclipse中SVN分支合并到主干
在项目开发中,需要添加一些新的功能,但是又不想影响到其他开发人员的项目进度,所以决定使用SVN分支进行开发,分支开发完毕后再合并到主干.本文介绍如何在eclipse中合并分支到主干. 1. 要想将分支 ...
- Java基础一：面向对象的特征
经过16年校招,自己在Java基础方面也算有了一个质的飞跃,从原来知其然,到现在知其所以然,现将学习心得总结于此. 首先需要知道类和对象是什么? 维基百科定义类为: an extensible pro ...