php+js+mysql设计的仿webQQ-<5>IM窗体的实现
<8>IM窗体的实现
IM窗体的效果图
PHP+HTML代码
<div id="chat"> <div id="title"> <table> <tr> <td width="208px"> WebChat </td> <td width="16px"> <img src="chat/up.png" title="收起" id="img" onclick="change1()" style="cursor:pointer;"/> </td> <td width="16px"> <img src="chat/close.png" title="退出" onclick="logout()" style="cursor:pointer;"/> </td> </tr> </table> </div> <div id="myself"> //自己的信息 <table> <tr> <td rowspan="2"> <img align="middle" border="1" width="40px" height="40px" src="avatar/<?php echo $row["email"];?>.jpg"/> </td> <td> <?php echo $row["email"];?> </td> </tr> <tr> <td> <?php echo $row["nickname"];?> </td> </tr> </table> </div> <div id="friendinfo"> <span onclick="hideFriend()" id="s" style="cursor:pointer;"> <table> <tr> <td> <img src="chat/show.png" id="show"/> </td> <td> <?php //在线好友人数和好友总人数 $allfriendsql="select count(*) as sum from friend where myself='".$email."'"; $allfriendresult=mysql_query($allfriendsql); $allfriendrow=mysql_fetch_array($allfriendresult); $onlinesql="select count(*) as online from friend,user where friend.myfriend=user.email and myself='".$email."' and state='在线'"; $onlineresult=mysql_query($onlinesql); $onlinerow=mysql_fetch_array($onlineresult); ?> 我的好友[<?php echo $onlinerow["online"]."/".$allfriendrow["sum"]; ?>] </td> </tr> </table> </span> <div id="friendlist"> //好友列表 <?php $friendSQL="select friend.*,user.* from friend,user where friend.myfriend=user.email and myself='".$email."' order by state"; $friendResult=mysql_query($friendSQL); while($friendRow=mysql_fetch_array($friendResult)) { echo "<div width='240px' id='".$friendRow["myfriend"]."' onmouseover='changeDivBgcolor(1,this)' onmouseout='changeDivBgcolor(2,this)' onDblclick='createDialogDiv(this)'>"; echo "<table><tr>"; echo "<td rowspan='2' width='40px'>"; echo "<img align='middle' border='1' width='35px' height='35px' src='avatar/".$friendRow["myfriend"].".jpg'/>"; echo "</td>"; echo "<td width='200px'>".$friendRow["myfriend"]."</td>"; echo "</tr>"; echo "<tr>"; echo "<td>".$friendRow["nickname"]."[".$friendRow["state"]."]</td>"; echo "</tr>"; echo "<tr>"; echo "<td align='right' colspan='2'><a href='deletefriend.php?friendid=".$friendRow["myfriend"]."'>删除</a></td>"; echo "</tr></table>"; echo "</div>"; } ?> </div> </div> <div id="bottom"> </div> </div>
注意这只是部分代码,中间有数据库操作语句,但没有数据库连接语句,大家能看懂就行了,还有CSS大家可以自己写,因为每个人得审美不同!
<9>IM窗体中的js效果——点击实现层的隐藏和显示
Js代码
function change1(){ var img; img=document.getElementById("img"); img.src="chat/down.png"; img.title="展开"; img.onclick=change2; document.getElementById("friendinfo").style.display="none"; } function change2(){ var img; img=document.getElementById("img"); img.src="chat/up.png"; img.title="收起"; img.onclick=change1; document.getElementById("friendinfo").style.display=""; }
<10>IM窗体中的js效果——当鼠标在层上时层的颜色改变以及层上字体颜色的改变
Js代码
function changeDivBgcolor(i,obj) { if(i==1) { document.getElementById(obj.id).style.background="#FFFF66"; document.getElementById(obj.id).style.color="black"; } else { document.getElementById(obj.id).style.background="#333333"; document.getElementById(obj.id).style.color="white"; } }
欢迎大家拍砖!(未完待续)