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";
	   }
}

欢迎大家拍砖！（未完待续）