http://www.gotalk.cn
两个帐号 zorou tian23
游客0210 tian23
我只想实现,那个面板到上边,下边,左边,右边,就自动上去,你再指向时就出来的效果。
------解决方案--------------------------------------------------------
就是一个DIV 的隐藏和显示
当点击 “我的好友” 时 先判断DIV的显示状态,如果是显示的,就隐藏,反之则显示
------解决方案--------------------------------------------------------
将 这段代码拷到你的机子上看效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml " >
<head >
<title> Untitled Page </title>
<script language= "JavaScript ">
function show()
{
if(document.getElementById( "Friend ").style.display == "none ")
{
document.getElementById( "Friend ").style.display = "block ";
}
else
{
document.getElementById( "Friend ").style.display = "none ";
}
}
</script>
</head>
<body>
<form id= "form1 " runat= "server ">
<span id= "myF " onclick = "show(); "> 我的好友 </span>
<div id= "Friend " style = "display:none ">
<table>
<tr>
<td> aaaa </td> <td> 在线 </td>
</tr>
<tr>
<td> bbbb </td> <td> 在线 </td>
</tr>
<tr>
<td> cccc </td> <td> 在线 </td>
</tr>
<tr>
<td> dddd </td> <td> 在线 </td>
</tr>
<tr>
<td> eeee </td> <td> 在线 </td>
</tr>
</table>
</div>
</form>
</body>
</html>
------解决方案--------------------------------------------------------
没有甚么好说的,就是纯 js + dhtml 实现的,
当然为了精确控制,你得需要熟悉 html 的样式属性,以及各个浏览器不同属性版本
你可以看其源码, 假如你不会,那就让我【无耻】一回吧 :P
下载、阅读下面的 .js 文件
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> GoTalk </title>
<link rel= "stylesheet " type= "text/css " href= "css/talkwindow.css " />
<link rel= "stylesheet " type= "text/css " href= "css/WindowClass.css " />
<link rel= "stylesheet " type= "text/css " href= "css/Editor.css " />
<script src= "js/guid.js "> </script>
<script src= "js/swfobject.js "> </script>
<script src= "js/array_func.js "> </script>
<script src= "js/mousemenu.js "> </script>
<script src= "js/flashchat.js "> </script>
<script src= "js/PopupWindow.js "> </script>
<script src= "js/sarissa.js "> </script>
<script src= "js/divselect.js "> </script>
<script src= "js/editor_quotable.js "> </script>