100分，100分，请看看这个网站效果是如何作的。在线，立即给分
日期：2014-05-18 浏览次数：20355 次
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>
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
