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" οnclick="Show('d1')">会话</div><div class="list" style="background-color:gainsboro" οnclick="Show('d2')">联系人</div><div class="list" style="background-color:greenyellow" οnclick="Show('d3')">群聊</div><div class="list" style="background-color:burlywood" οnclick="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" οnclick="show('a1')">  我的好友</div><div class="zi" id="a1"><div class="lb" οnclick="Xuan(this)" xz="0" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)"><span class="xm">陈一</span></div><div class="lb" οnclick="Xuan(this)" xz="0" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)"><span class="xm">王二</span></div></div><div class="zhu" οnclick="show('a2')">  特别关注</div><div class="zi" id="a2"><div class="lb" οnclick="Xuan(this)" xz="0" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)"><span class="xm">张三</span></div><div class="lb" οnclick="Xuan(this)" xz="0" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)"><span class="xm">李四</span></div></div><div class="zhu" οnclick="show('a3')">  陌生人</div><div class="zi" id="a3"><div class="lb" οnclick="Xuan(this)" xz="0" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)"><span class="xm">王五</span></div><div class="lb" οnclick="Xuan(this)" xz="0" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)"><span class="xm">老六</span></div><div class="lb" οnclick="Xuan(this)" xz="0" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)"><span class="xm">陈七</span></div></div><div class="zhu" οnclick="show('a4')">  黑名单</div><div class="zi" id="a4"><div class="lb" οnclick="Xuan(this)" xz="0" οnmοuseοver="Bian(this)" οnmοuseοut="Hui(this)"><span class="xm">王二</span></div><div class="lb" οnclick="Xuan(this)" xz="0" οnmοuseοver="Bian(this)" οnmοuseοut="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、什么时候能与数据库对接呢?聊天功能未实现?(期待聊天功能。)

转载于:https://www.cnblogs.com/chenguanai/p/6757378.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/72004.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Servlet电子商城项目(入门级一)

一个电子商城分析(疯购) 数据库&#xff1a;crazybuy; 1商品类别crazybuy_ product_ category2商品crazybuy_ product3用户crazybuy_ user4订单crazybuy_ order5订单详情crazybuy_ order_detail6评论crazybuy_comment7广告、新闻crazybuy_news 购物车&#xff1a; 表字段&a…

侦测卡 变色龙侦测卡 chameleon-Mini(迷你变色龙) (一)

参考&#xff1a;http://www.proxmark.orghttps://github.com/emsec/ChameleonMini/wiki https://github.com/nfc-tools/libnfc https://github.com/nfc-tools/mfoc https://github.com/nfc-tools/mfcuk https://www.cnblogs.com/youse/p/5793279.html https://www.freebuf.co…

python可以实现的功能_学会利用Python实现“美颜”功能

下载W3Cschool手机App&#xff0c;0基础随时随地学编程导语 利用Python实现美颜。。。 这是之前在GitHub上下载的一个项目。。。 似乎有些日子了。。。 所以暂时找不到原项目的链接了。。。 今天抽空看了下它源代码的主要思想&#xff0c;似乎挺简单的。。。 于是决定用P…

【论文笔记】Mutual Information-Based Temporal Difference Learning for Human Pose Estimation in Video

Mutual Information-Based Temporal Difference Learning for Human Pose Estimation in Video 前言1. Background & Motivation2, Methodology (Temporal Difference Learning based on Mutual Information, TDMI)2.1 Feature Extractor2.2 Multi-Stage Temporal Differen…

二手车交易价格预测——Task2

二手车交易价格预测——Task2 EDA-数据探索性分析一、目标二、载入相关库三、载入数据&#xff0c;并做相关分析&#xff08;一&#xff09;特征集&#xff08;二&#xff09;数据总览&#xff08;三&#xff09;判断数据缺失和异常&#xff08;四&#xff09;了解预测值的分布…

巴比特 | 元宇宙每日必读:发布即落后?百度推出大语言模型文心一言,李彦宏坦言对标ChatGPT、GPT-4的门槛非常高...

摘要&#xff1a;GPT-4发布一天之后&#xff0c;百度顶住压力交出了自己的答卷——文心一言。据「甲子光年」了解&#xff0c;文心一言对标的是OpenAI在去年11月底发布的ChatGPT&#xff08;GPT-3.5版本&#xff09;&#xff0c;希望做出一个“能拿得出手”的产品。但在实力更强…

41.7%年化收益率 人工智能买股可以如此简单

学一门知识&#xff0c;充实自我 掌握一项工具&#xff0c;让生活更美好~今天flare老师教大家AI选股&#xff0c;轻松搭建一个年化收益40%的机器学习选股策略 —by flare zhao,转载请注明出处&#xff0c;原创不易&#xff0c;谢谢支持 话不多说&#xff0c;先看策略的最终表现…

人工智能帮你3分钟完成股票抄底

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈…

2023年市场规模将超147亿美元,中国人工智能产业的“风口”来了吗?

2023年IDC中国ICT市场趋势论坛于5月10日召开&#xff0c;会议重点探讨了人工智能、工业互联网、网络安全、大数据、云计算等领域&#xff0c;并强调了智能终端、智慧城市和半导体等行业的前景。 IDC预计&#xff0c;中国人工智能市场规模在2023年将超过147亿美元&#xff0c;到…

泛娱乐行业需求升级,即构推出“泛娱乐社交玩法2.0方案”

泛娱乐社交领域激烈的市场环境&#xff0c;引发社交产品竞争激烈、玩法同质化、获客困难等一系列行业痛点问题&#xff0c;行业需要更新颖、更符合年轻一代的社交玩法来实现增长与营收的突破。 回看过去十几年娱乐社交的发展&#xff0c;从早期的BBS/论坛等社交网络形式&#x…

2020大学生就业报告:IT行业人才缺口巨大,好就业

据教育部公开数据,2020年应届高校毕业生比去年增长40万,达到874万。 毕业生数量攀升,而受疫情影响,大批企业放慢了招聘步伐,甚至裁员。2020年,不管你是应届毕业生还是打算转行的职场新人,都会面临着“僧多粥少”的困局。 2020就业难,难于上青天。那么,这次“就业大考…

大学生就业问题的统计研究

最近在写学年论文&#xff0c;哈哈&#xff0c;这个文章被导师修改&#xff0c;觉得有些不妥就基本算是胎死腹中了。但是毕竟是自己的blog&#xff0c;在这里写写感觉也无所谓的哈。但是秉承着对自己博客&#xff0c;对希望学习统计的大伙儿负责的态度。我可以保证研究过程中的…

PHP计算比较两段文字内容的重复率

一、介绍 用于比较两段文字内容的重复率二、运行结果 三、代码 <?php /*** 内容相似度计算*/ class GetSimilar{function __construct(){}function getSimilar($str1, $str2) {$len1 strlen($str1);$len2 strlen($str2);$len strlen($this->getLCS($str1, $str2, $…

抖音直播运营 | 疫情时代下如何用直播驱动品牌业务增长

自从提出「兴趣电商」概念后&#xff0c;抖音便开始逐步发力并推出三大扶持计划。大量商家入驻抖音电商&#xff0c;争相踏入品牌自播这一黄金赛道&#xff0c;在疫情时代下找到了效率更高、品牌价值链更短的新零售模式。 货架电商的特征是指数式增长、顾客货比三家&#xff0c…

抖音如何直播汉字找不同小游戏

在电脑下载电脑版微信、直播伴侣2款软件&#xff1b; 免费玩小程序可以在微信小程序搜索&#xff1a;火眼金睛汉字找不同、金金汉字找不同、范范汉字找不同、九九汉字找不同&#xff0c;这4个名字都可以&#xff0c;包含基本功能&#xff1b; 定制版VIP小程序联系微信号&…

如何用直播摄像机、编码器、电脑端OBS软件在抖音平台上做推流直播现实背景

现实背景 自2021年以来&#xff0c;抖音平台提高了电脑推流直播门槛&#xff0c;导致很多人无法通过电脑软件做推流直播&#xff0c;也无法通过第三方推流工具做直播&#xff0c;具体要求如下图所示&#xff1a; 抖音平台的新规则如下&#xff1a;硬性条件&#xff1a; 1. 需实…

利用OBS推流抖音直播电脑屏幕或PC游戏

抖音目前的火爆程度相信大家都有目共睹&#xff0c;抖音也为部分活跃用户提供直播功能&#xff0c;开通直播的方法有&#xff1a;①抖音粉丝达到10000粉丝&#xff0c;官方会自动邀请你开通直播权限。②加入和抖音官方合作的工会&#xff0c;无需粉丝&#xff0c;也可以开通直播…

抖音弹幕互动游戏直播怎么弄?

● 本质上是基于直播的一种实时互动玩法&#xff0c;用户可以通过直播间互动行为实现跟主播之间的实时互动&#xff1b; ● 主播开启玩法后进行投屏分享&#xff0c;用户通过发送评论/赠送礼物来影响主播侧的玩法内容&#xff1b; ● 特定礼物流水&#xff08;即魔法镜、能量电…

最常用的抖音直播话术大全,新手主播快收藏

1.高客单直播间主播话术怎样说? 第一 首先高客单价的女装播的时候一定要着重去讲你的做I、你的设计、你的款式、你的品牌、你 的独特性,要知道高客单消费人群需要的是价值,示范:各位姐妹们看一下主播身上的这款水雾蓝的 设计款连衣裙给大家做了一个内衬,领子立起来特别的好看,…

怎么把短视频做成gif图?短视频生成gif的步骤

在平时大家刷手机的时候&#xff0c;经常能够刷到一些短视频&#xff0c;我们经常可以看到很多由mp4视频转化成的精彩动图片段&#xff0c;那么应该怎么吧短视频做成gif图呢&#xff1f;其实视频转gif的方法非常简单&#xff0c;今天就来教大家一个在线视频转gif格式的方法&…