QQ好友界面_qq怎么群发消息给好友列表

QQ好友界面_qq怎么群发消息给好友列表效果如下:依次为图一图二图三图四主要实现效果:点击主标题显示下拉好友,再点击收起下拉好友;鼠标移到好友上背景颜色改变;选中的好友背景颜色也要改变;代码如下:<!DOCTYPEht

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

效果如下:依次为图一—图二—-图三—-图四

QQ好友界面_qq怎么群发消息给好友列表QQ好友界面_qq怎么群发消息给好友列表QQ好友界面_qq怎么群发消息给好友列表QQ好友界面_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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168044.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • android 防止多次点击提交

    android 防止多次点击提交

  • Linux运维常见面试题汇总

    Linux运维常见面试题汇总Linux面试题一、填空题1. 在Linux 系统中,以文件方式访问设备。2.Linux 内核引导时,从文件/etc/fstab中读取要加载的文件系统。3.Linux 文件系统中每个文件用indoe节点来标识。4. 全部磁盘块由四个部分组成,分别为引导块 、专用块 、 i 节点表块 和 数据存储块 。5. 链接分为:硬链接 和 符号链接 。

  • HTML5触摸事件(touchstart、touchmove和touchend)

    HTML5触摸事件(touchstart、touchmove和touchend)HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。  一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员

  • HtmlDocument 类 使用

    HtmlDocument 类 使用HtmlDocument类 注意:此类在.NETFramework2.0版中是新增的。提供对WebBrowser控件承载的HTML文档的顶级编程访问。命名空间:System.Windows.Forms程序集:System.Windows.Forms(在system.windows.forms.dll中)varExpCollDivS

  • OCR截图文字识别提取(无需安装)「建议收藏」

    OCR截图文字识别提取(无需安装)「建议收藏」本软件无需安装,适用于Windows平台,具有截图,文字提取等功能,亦可用于图片和PDF中文字的识别提取中。目前版本为V3.82。截图文字提取V3.82下载地址如下蓝奏云下载:https://www.lanzous.com/b679733百度网盘下载链接:https://pan.baidu.com/s/1IMY0SWpyKy8uf6o5GTveLw新功能简介:1…

  • 推荐系统中传统模型——LightGBM + FFM融合

    推荐系统中传统模型——LightGBM + FFM融合之前比较相关的文章:推荐系统中传统模型——LightGBM+LR融合python-机器学习lightgbm相关实践1深入FFM原理与实践来自美团技术团队的,深入FFM原理与实践FM和FFM模型是最近几年提出的模型,凭借其在数据量比较大并且特征稀疏的情况下,仍然能够得到优秀的性能和效果的特性,屡次在各大公司举办的CTR预估比赛中获得不错的战绩。美团技术团队在搭建DSP的过程中,探索并使用了FM和FFM模型进行CTR和CVR预估,并且取得了不错的效果。经过One-Hot编码之后,大部分

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号