用javascript如何实现OICQ的界面

zf_sxl 2002-04-08 06:03:53

多谢了！！！！！！！！！！！！！！！！！

...全文

91 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

linhaibo 2002-04-10

打赏
举报

呵呵...

孟子E章 2002-04-09

打赏
举报

seabell 2002-04-09

打赏
举报

用幀的一种方法
<frameset rows="24,24,*" name="frm_tree" noresize border="0" framespacing="0">
<frame name="frm_mail" src="mailtree.htm" scrolling="auto" frameborder="NO" noresize>
<frame name="frm_viewpic" src="viewpictree.htm" scrolling="auto" frameborder="NO" noresize>
<frame name="frm_product" src="producttree.htm" scrolling="auto" frameborder="NO" noresize>
</frameset>

mailtree.htm
<body bgcolor="#FFFFFF" text="#000000" onload="content.style.display='none'">
<table width=100% style="border:1px,1px,1px,1px outset"><tr><td style="cursor:hand" onclick="top.frm_product.content.style.display='none';top.frm_viewpic.content.style.display='none';content.style.display='block';top.frm_tree.rows='*,24,24'">
邮件管理</td></tr></table>
<div id=content>
<p> mail </p>
</div>
</body>

viewpictree.htm
<body bgcolor="#FFFFFF" text="#000000" onload="content.style.display='none'">
<table width=100% style="border:1px,1px,1px,1px outset"><tr><td style="cursor:hand" onclick="top.frm_mail.content.style.display='none';top.frm_product.content.style.display='none';content.style.display='block';top.frm_tree.rows='24,*,24'">
图档浏览</td></tr></table>
<div id=content>
<p> viewpic </p>
</div>
</body>

producttree.htm
<body bgcolor="#FFFFFF" text="#000000" onload="content.style.display='block'">
<form name="form1" method="post" action="">
<table width=100% style="border:1px,1px,1px,1px outset"><tr><td style="cursor:hand" onclick="top.frm_mail.content.style.display='none';top.frm_viewpic.content.style.display='none';content.style.display='block';top.frm_tree.rows='24,24,*'">
产品设计管理</td></tr></table>
<div id=content>
<p> product </p>
</div>
</body>

flylyke 2002-04-09

打赏
举报

孟兄,你的那个向下就不行了

weidegong 2002-04-09

打赏
举报

http://go3.163.com/websdk/dhtml/myjssamples/oltoolbar/index.htm

直接另存为就可以得到代码了

kkk2kkk 2002-04-08

打赏
举报

试了试，不错！再加工一下可以仿OUTLOOK界面

rangq1 2002-04-08

打赏
举报

本人做了一个大概的框架，见笑了
<html>
<head>
<title>webplayer</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.menuFrame
{
width:133px;
top: 30px;
border:1 inset black;
overflow:auto;
bgcolor:buttonface;
}
</style>
<script language="javascript">
function QQStyle(objMove)
{
if(!bQQMoveOver)return;
bQQMoveOver = false;
var nQQLen = 3;
var strId = objMove.id;
var nId = parseInt(strId.substring(strId.length - 1));
var strName = strId.substring(0,strId.length - 1)
var bDown = false;
var bUp = false;
var nCurrentPos = parseInt(objMove.style.top);
var nPreviousPos = -1;
if(nId != 0)nPreviousPos = parseInt(eval(strName + (nId - 1) + ".style.top"));
var nNextPos = -1;
if(nId != nQQLen - 1)nNextPos = parseInt(eval(strName + (nId + 1) + ".style.top"));

if(nId == 0)
{
if(nCurrentPos == nNextPos)bUp = true;
if(nNextPos != nCurrentPos)bDown = true;
}
else if(nId == nQQLen - 1)
{
if(nCurrentPos != nPreviousPos)bUp = true;
if(nCurrentPos == nPreviousPos)bDown = true;
}
else
{
if(nNextPos != nCurrentPos)bDown = true;
if(nCurrentPos != nPreviousPos)bUp = true;
}
objQQ = objMove;
if(bDown)QQMovedown();
else if(bUp)QQMoveup();
else bQQMoveOver = true;
}
var nQQEnd = 180;
var objQQ = null;
var nQQStep = 20;
var bQQMoveOver = true;
function QQMovedown()
{
if(parseInt(objQQ.style.top) < nQQEnd && objQQ != null)
{
objQQ.style.top = parseInt(objQQ.style.top) + nQQStep;
setTimeout("QQMovedown()", 10);
}
else bQQMoveOver = true;
}
function QQMoveup()
{
if(parseInt(objQQ.style.top) > 0 && objQQ != null)
{
objQQ.style.top = parseInt(objQQ.style.top) - nQQStep;
setTimeout("QQMoveup()", 10);
}
else bQQMoveOver = true;
}
</script>
</head>
<body text="#000000" bgcolor="#CCCC99">
<div id="Layer12" style="position:absolute; z-index:12; left: 20px; height: 250" class="menuFrame" >
<div id="QQMove0" style="position:relative; top:0;width:130px; height:10; z-index:1;cursor:hand;border:2 outset buttonhighlight;" onClick="QQStyle(this);">XML</div>
<div id="QQMove1" style="position:relative; top:0;width:130px; height:10; z-index:1;cursor:hand;border:2 outset buttonhighlight" onClick="QQStyle(this);">HTML</div>
<div id="QQMove2" style="position:relative; top:0;width:130px; height:10; z-index:1;cursor:hand;border:2 outset buttonhighlight" onClick="QQStyle(this);">ORACLE</div>
<div id="QQContent" style="position:relative;top:0;width:130px; height:10; z-index:1;"></div>
</div>

</body>
</html>