当前位置: 代码迷 >> ASP.NET >> 100分,100分,请看看这个网站效果是如何作的。在线,立即给分
  详细解决方案

100分,100分,请看看这个网站效果是如何作的。在线,立即给分

热度:4441   发布时间:2013-02-25 00:00:00.0
100分,100分,请看看这个网站效果是怎么作的。在线,立即给分。

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>

  相关解决方案