qq面板（仿版，未完待续中。。。。）---2017-04-24
生活随笔
收集整理的這篇文章主要介紹了
qq面板（仿版，未完待续中。。。。）---2017-04-24
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
主要實(shí)現(xiàn)效果：
1、點(diǎn)擊對話，顯示對話；點(diǎn)擊聯(lián)系人，顯示聯(lián)系人
2、在聯(lián)系人界面：
? ? 實(shí)現(xiàn)好友列表的展開與折疊；（圖12）
? ? 實(shí)現(xiàn)鼠標(biāo)移到好友列表上的背景顏色的變化；（圖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')">聯(lián)系人</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')">??特別關(guān)注</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";}//顯示當(dāng)前的document.getElementById(id).style.display = "block";}//實(shí)現(xiàn)列表的展開與疊起function show(id){var z=document.getElementById(id);if (z.style.display=="block"){z.style.display="none";}else{z.style.display="block";}}//展開后列表背景顏色變?yōu)榘咨?#xff0c;選中好友變?yōu)殚冱S色 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";}//設(shè)置鼠標(biāo)移動上的顏色變化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";}//鼠標(biāo)離開后顏色回到原先的背景顏色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、什么時(shí)候能與數(shù)據(jù)庫對接呢？聊天功能未實(shí)現(xiàn)？（期待聊天功能。）
轉(zhuǎn)載于:https://www.cnblogs.com/chenguanai/p/6757378.html
總結(jié)
以上是生活随笔為你收集整理的qq面板（仿版，未完待续中。。。。）---2017-04-24的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于网页数据导入excel
- 下一篇： 微信小程序使用wxParse解析html