<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" οnclick="change1()" style="cursor:pointer;"/>
</td>
<td width="16px">
<img src="chat/close.png" title="退出" οnclick="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 οnclick="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"]."' οnmοuseοver='changeDivBgcolor(1,this)' οnmοuseοut='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.οnclick=change2;
document.getElementById("friendinfo").style.display="none";
}
function change2(){
var img;
img=document.getElementById("img");
img.src="chat/up.png";
img.title="收起";
img.οnclick=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";
}
}
欢迎大家拍砖!(未完待续)