如何控制div的位置

sportdog 2004-08-04 11:47:11
鼠标移动到第二章的时候，<div>移动到第二章的下面，就像一下拉菜单一样！
现在div中的table的宽度可以控制了，可位置没有移动！

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE cellSpacing=1 cellPadding=1 width="75%" border=1>
<TR>
<TD >第一章</TD>
<TD onmouseover="setPlace()" id="td1">第二章</TD>
<TD>第三章</TD>
</TR>
</TABLE>
<div id="div_table_1" style="display:none">
<table id="table1" border=1 bgcolor=Yellow style="width:300;height:200">
<tr>
<td>第一节</td>
</tr>
<tr>
<td>第二节</td>
</tr>
<tr>
<td>第三节</td>
</tr>
<tr>
<td>第四节</td>
</tr>
<tr>
<td>第五节</td>
</tr>
</table>
</div>


</BODY>
</HTML>
<script language=javascript>
function setPlace()
{
var oTable,oDiv,oTd;
oDiv = document.all.div_table_1;
oTable = document.all.table1;
oTd = document.all.td1;

oDiv.style.display = 'block';

var tdwidth = oTd.offsetWidth;
var tdheight = oTd.offsetHeight;
var tdleft = oTd.offsetLeft;
var tdtop = oTd.offsetTop;

oDiv.style.width = tdwidth;
oTable.style.width = tdwidth;

oDiv.style.left = tdleft;
oDiv.style.top = tdtop;

oTable.style.left = tdleft;
oTable.style.top = tdtop;
}
</script>
...全文
2471 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
sportdog 2004-08-05
  • 打赏
  • 举报
 回复
to duoduobaba(避雷针) 我开个帖你进来！
duoduobaba 2004-08-05
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<style type="text/css">
<!--
TR
{
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: 宋体,arial
}
TD
{
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: 宋体,arial
}
.dropdown
{
Z-INDEX: 10;
LEFT: -20px;
WIDTH: 10px;
POSITION: absolute;
TOP: 81px
}
.dropLinks
{
FONT-SIZE: 11px;
COLOR: #ffffff;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
TEXT-DECORATION: none
}
-->
</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width="200" border=0 bgcolor=cornflowerblue>
<TR>
<TD onmouseover="setPlace(this,1)" >长城电脑</TD>
<TD onmouseover="setPlace(this,2)" id="td1">第二章</TD>
<TD onmouseover="setPlace(this,3)" >第三章</TD>
</TR>
</TABLE>
<div id="div_table_1" class="dropdown" onMouseOver="this.style.display =''" onMouseOut="this.style.display = 'none';">
</div>
</BODY>
</HTML>
<script language=javascript>
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}

function setPlace(cell,i)
{
var strTable="<table id=table1 border=0 cellpadding=0 cellspacing=0 bordercolor=#397DBD bgcolor=#6d9cd1>";
strTable+="<tr><td >台式机</td></tr><tr><td>服务器</td></tr><tr><td>笔记本</td></tr><tr><td>打印机</td></tr><tr><td>网络产品</td></tr></table>";
div_table_1.innerHTML = strTable;
var arrPos = getPos(cell);
var oDiv = document.all.div_table_1;
var oTable = document.all.table1;

oDiv.style.display = '';
oTable.style.display = '';
var tdwidth = cell.offsetWidth;
var tdheight = cell.offsetHeight;
var tdleft = arrPos[1];
var tdtop = arrPos[0];
oTable.style.width = tdwidth;
oDiv.style.width = tdwidth;

oDiv.style.left = tdleft;
oDiv.style.top = tdtop + tdheight;
}


</script>
</body>
</html>
zmy0611 2004-08-05
  • 打赏
  • 举报
 回复
那就要通過定義 div_table_1 的onmouseout 事件實現了，但要做
event.cancelBubble = true;
否則會觸發父對象的事件，
另: Div做定位一般都是做絕對定位, position:absolute
sportdog 2004-08-05
  • 打赏
  • 举报
 回复
现在是通过body onclcik事件隐藏的！我希望移开时隐藏。
sportdog 2004-08-05
  • 打赏
  • 举报
 回复
唉，效果还是不好，第一次都会闪一下！谁帮我改改？
谁能帮我改好！我另开贴给200分
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<style type="text/css">
<!--
TR
{
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: 宋体,arial
}
TD
{
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: 宋体,arial
}
.dropdown
{
Z-INDEX: 10;
LEFT: -20px;
WIDTH: 10px;
POSITION: absolute;
TOP: 81px
}
.dropLinks
{
FONT-SIZE: 11px;
COLOR: #ffffff;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
TEXT-DECORATION: none
}
-->
</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width="200" border=0 bgcolor=cornflowerblue>
<TR>
<TD onmouseover="setPlace(this,1)" >长城电脑</TD>
<TD onmouseover="setPlace(this,2)" id="td1">第二章</TD>
<TD onmouseover="setPlace(this,3)" >第三章</TD>
</TR>
</TABLE>
<div id="div_table_1" class="dropdown">
</div>
</BODY>
</HTML>
<script language=javascript>
document.body.attachEvent("onclick",hiddenDiv);
function hiddenDiv()
{
div_table_1.style.display = 'none';
}
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}

function setPlace(cell,i)
{
var strTable="<table id=table1 border=0 cellpadding=0 cellspacing=0 bordercolor=#397DBD bgcolor=#6d9cd1>";
strTable+="<tr><td >台式机</td></tr><tr><td>服务器</td></tr><tr><td>笔记本</td></tr><tr><td>打印机</td></tr><tr><td>网络产品</td></tr></table>";
div_table_1.innerHTML = strTable;
var arrPos = getPos(cell);
var oDiv = document.all.div_table_1;
var oTable = document.all.table1;

oDiv.style.display = '';
oTable.style.display = '';
var tdwidth = cell.offsetWidth;
var tdheight = cell.offsetHeight;
var tdleft = arrPos[1];
var tdtop = arrPos[0];
oTable.style.width = tdwidth;
oDiv.style.width = tdwidth;

oDiv.style.left = tdleft;
oDiv.style.top = tdtop + tdheight;
}


</script>

LxcJie 2004-08-04
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE cellSpacing=1 cellPadding=1 width="75%" border=1>
<TR>
<TD onmouseover="setPlace(this)" onmouseout="div_table_1.style.display='none'" >第一章</TD>
<TD onmouseover="setPlace(this)" onmouseout="div_table_1.style.display='none'" id="td1">第二章</TD>
<TD onmouseover="setPlace(this)" onmouseout="div_table_1.style.display='none'" >第三章</TD>
</TR>
</TABLE>
<div id="div_table_1" style="display:none;position:absolute">
<table id="table1" border=1 bgcolor=Yellow style="width:300;height:200">
<tr>
<td>第一节</td>
</tr>
<tr>
<td>第二节</td>
</tr>
<tr>
<td>第三节</td>
</tr>
<tr>
<td>第四节</td>
</tr>
<tr>
<td>第五节</td>
</tr>
</table>
</div>


</BODY>
</HTML>
<script language=javascript>
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}

function setPlace(cell)
{
var arrPos = getPos(cell);
var oDiv = document.all.div_table_1;

oDiv.style.display = 'block';

var tdwidth = cell.offsetWidth;
var tdheight = cell.offsetHeight;
var tdleft = arrPos[1];
var tdtop = arrPos[0];

oDiv.style.width = tdwidth;

oDiv.style.left = tdleft;
oDiv.style.top = tdtop + tdheight;
}
</script>
sportdog 2004-08-04
  • 打赏
  • 举报
 回复
当鼠标移开菜单时，菜单隐藏的代码如何写呢？
我加了个onmouseout的代码，可效果不好，能帮忙写写吗？
解决了就给分。
fason 2004-08-04
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE cellSpacing=1 cellPadding=1 width="75%" border=1>
<TR>
<TD >第一章</TD>
<TD onmouseover="setPlace(this,'div_table_1')" id="td1">第二章</TD>
<TD>第三章</TD>
</TR>
</TABLE>
<div id="div_table_1" style="position:absolute;display:none">
<table id="table1" border=1 bgcolor=Yellow style="width:300;height:200">
<tr>
<td>第一节</td>
</tr>
<tr>
<td>第二节</td>
</tr>
<tr>
<td>第三节</td>
</tr>
<tr>
<td>第四节</td>
</tr>
<tr>
<td>第五节</td>
</tr>
</table>
</div>


</BODY>
</HTML>
<script language=javascript>
function getPosition(el) {
var e = el,l = el.offsetLeft,t = el.offsetTop;
while(e=e.offsetParent){
l += e.offsetLeft;
t += e.offsetTop;
}
return [l,t,el.offsetWidth,el.offsetHeight]
}
function setPlace(oTd,d)
{
var oDiv = document.all(d);
oDiv.style.display = 'block';
var p = getPosition(oTd);
var tdwidth = p[2];
var tdheight = p[3];
var tdleft = p[0];
var tdtop = p[1];
oDiv.style.left = tdleft;
oDiv.style.top = tdtop + tdheight;
}
</script>
mind_1220 2004-08-04
  • 打赏
  • 举报
 回复
你们发的太长了
我发个短的：
DIV.DIVNAME
{
LEFT: xxxpx;
POSITION: absolute;
TOP: xxpx
}
LxcJie 2004-08-04
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE cellSpacing=1 cellPadding=1 width="75%" border=1>
<TR>
<TD >第一章</TD>
<TD onmouseover="setPlace(this)" id="td1">第二章</TD>
<TD>第三章</TD>
</TR>
</TABLE>
<div id="div_table_1" style="display:none;position:absolute">
<table id="table1" border=1 bgcolor=Yellow style="width:300;height:200">
<tr>
<td>第一节</td>
</tr>
<tr>
<td>第二节</td>
</tr>
<tr>
<td>第三节</td>
</tr>
<tr>
<td>第四节</td>
</tr>
<tr>
<td>第五节</td>
</tr>
</table>
</div>


</BODY>
</HTML>
<script language=javascript>
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}

function setPlace(cell)
{
var arrPos = getPos(cell);
var oDiv = document.all.div_table_1;

oDiv.style.display = 'block';

var tdwidth = cell.offsetWidth;
var tdheight = cell.offsetHeight;
var tdleft = arrPos[1];
var tdtop = arrPos[0];

oDiv.style.width = tdwidth;

oDiv.style.left = tdleft;
oDiv.style.top = tdtop + tdheight;
}
</script>
kingdomzhf 2004-08-04
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY onmousemove="document.all('div_table_1').style.display='none'">
<TABLE cellSpacing=1 cellPadding=1 width="75%" border=1>
<TR>
<TD >第一章</TD>
<TD onmouseover="setPlace()" id="td1">第二章</TD>
<TD>第三章</TD>
</TR>
</TABLE>
<div id="div_table_1" style="display:none" onmousemove="event.cancelBubble=true">
<table id="table1" border=1 bgcolor=Yellow style="width:300;height:200" >
<tr>
<td>第一节</td>
</tr>
<tr>
<td>第二节</td>
</tr>
<tr>
<td>第三节</td>
</tr>
<tr>
<td>第四节</td>
</tr>
<tr>
<td>第五节</td>
</tr>
</table>
</div>


</BODY>
</HTML>
<script language=javascript>
function setPlace()
{
var oTable,oDiv,oTd;
oDiv = document.all.div_table_1;
oTable = document.all.table1;
oTd = document.all.td1;

oDiv.style.display = '';
oTable.style.display = '';
var tdwidth = oTd.offsetWidth;
var tdheight = oTd.offsetHeight;
var tdleft = oTd.offsetLeft ;
var tdtop = oTable.offsetTop;

oDiv.style.position="absolute"
oDiv.style.width = tdwidth;
oTable.style.width = tdwidth;

oDiv.style.left = tdleft;
oDiv.style.top = tdtop;

oTable.style.left = tdleft;
oTable.style.top = tdtop;
}
</script>
sportdog 2004-08-04
  • 打赏
  • 举报
 回复
to LxcJie(肖冲) :

不是离开第二章时隐藏，是移开下拉菜单时隐藏！
请问如何写？

css控制div位置
内容位置：text-align:left; text-align:center; text-align:right; div层位置：float:left; float:right; 如果有3个层的话 .panel{width:600px;height:200px;} .div1{width:200px;height:200px;float:left;} .div2{width:200px;he
div位置控制
一个div便是一个上下的位置，不会左右展示除非专门控制 两个在一行展示： &lt;div &gt;     &lt;div id="div1" style="float:left"&gt;div1   content&lt;/div&gt;     &lt;div id="div2" style="float:left"&gt;div2   content&
html 动态设置坐标,js 如何动态改变div的位置
在一个div中动态创建一个div，要取得这个div相对于父窗口的位置，我开始以为appendChild就是子div，取得这个子对象就是我想要的位置，但是不是这样的，它的位置还是相对document的。所以我做了一个实验：通过取得子窗口的位置减去父窗口的位置就可以了。 New Document function fun(){//alert(father.offsetTop);//alert(fath...
html中div的位置控制,CSS中DIV标签实现定位单元的控制
你对CSS中DIV标签的用法是否了解，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIVDIV在编程中又叫做整除，即只得商的整数。DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含...
js实现随滚动条滚动div位置动态变化
js实现随滚动条滚动，div位置动态变化，使div不会因为滚动条的下滑而导致div被上部边界覆盖。
JavaScript

87,914

社区成员

224,620

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章