护肤网站的功能设计,游戏推广引流,wordpress 首页只显示标题,大理州住房和城乡建设局网站主要实现效果#xff1a; 1、点击对话#xff0c;显示对话#xff1b;点击联系人#xff0c;显示联系人 2、在联系人界面#xff1a; 实现好友列表的展开与折叠#xff1b;#xff08;图12#xff09; 实现鼠标移到好友列表上的背景颜色的变化#xff1b;#xff08;…主要实现效果 1、点击对话显示对话点击联系人显示联系人 2、在联系人界面 实现好友列表的展开与折叠图12 实现鼠标移到好友列表上的背景颜色的变化图3 选中的好友背景颜色改变图4 代码如下 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle#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/headbodydiv idmiddiv idmenudiv classlist stylebackground-color:gold οnclickShow(d1)会话/divdiv classlist stylebackground-color:gainsboro οnclickShow(d2)联系人/divdiv classlist stylebackground-color:greenyellow οnclickShow(d3)群聊/divdiv classlist stylebackground-color:burlywood οnclickShow(d4)空间/div/divdiv idd1 classnr stylebackground-color:gold对话/divdiv idd2 classnr stylebackground-color:gainsboro; display:none;div classzhu οnclickshow(a1) 我的好友/divdiv classzi ida1div classlb οnclickXuan(this) xz0 οnmοuseοverBian(this) οnmοuseοutHui(this)span classxm陈一/span/divdiv classlb οnclickXuan(this) xz0 οnmοuseοverBian(this) οnmοuseοutHui(this)span classxm王二/span/div/divdiv classzhu οnclickshow(a2) 特别关注/divdiv classzi ida2div classlb οnclickXuan(this) xz0 οnmοuseοverBian(this) οnmοuseοutHui(this)span classxm张三/span/divdiv classlb οnclickXuan(this) xz0 οnmοuseοverBian(this) οnmοuseοutHui(this)span classxm李四/span/div/divdiv classzhu οnclickshow(a3) 陌生人/divdiv classzi ida3div classlb οnclickXuan(this) xz0 οnmοuseοverBian(this) οnmοuseοutHui(this)span classxm王五/span/divdiv classlb οnclickXuan(this) xz0 οnmοuseοverBian(this) οnmοuseοutHui(this)span classxm老六/span/divdiv classlb οnclickXuan(this) xz0 οnmοuseοverBian(this) οnmοuseοutHui(this)span classxm陈七/span/div/divdiv classzhu οnclickshow(a4) 黑名单/divdiv classzi ida4div classlb οnclickXuan(this) xz0 οnmοuseοverBian(this) οnmοuseοutHui(this)span classxm王二/span/divdiv classlb οnclickXuan(this) xz0 οnmοuseοverBian(this) οnmοuseοutHui(this)span classxm王二/span/div/div/divdiv idd3 classnr stylebackground-color:greenyellow; display:none群聊/divdiv idd4 classnr stylebackground-color:burlywood; display:none空间/div/div/body
/html
script typetext/javascriptfunction Show(id){//隐藏所有var attr document.getElementsByClassName(nr);for(var i0;iattr.length;i){attr[i].style.display none;}//显示当前的document.getElementById(id).style.display block;}//实现列表的展开与叠起function show(id){var zdocument.getElementById(id);if (z.style.displayblock){z.style.displaynone;}else{z.style.displayblock;}}//展开后列表背景颜色变为白色选中好友变为橘黄色
function Xuan(a){var attr document.getElementsByClassName(lb);for(var i0;iattr.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 i0;iattr.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 i0;iattr.length;i){if(attr[i].getAttribute(xz)0){attr[i].style.backgroundColor white;}}}
/script还需完善 1、对话列表群聊等未布局 2、什么时候能与数据库对接呢聊天功能未实现期待聊天功能。转载于:https://www.cnblogs.com/chenguanai/p/6757378.html
