js控制div层解决方案

js控制div层
有一个导航，希望在鼠标移动到每一个选项的时候能显示出子项目。
但由于不同显示器分辨率的原因，子项目显示的位置不能相对固定。
目前，只针对800*768的实现：

JScript code

#Layer1{left:40px;}#Layer2{left:100px;}#Layer3{left:200px;}#Layer4{left:300px;}#Layer5{left:400px;}#Layer6{left:auto;right:80px;}#Layer7{left:auto;right:80px;}

jsp页面中：

CSS code

&lt;div id="Layer2" class="submenu" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')"&gt; &lt;div class=""&gt;      &lt;ul&gt;          &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;          &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;          &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;          &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;          &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;          &lt;li class="subright"&gt;&lt;/li&gt;      &lt;/ul&gt;    &lt;/div&gt;&lt;/div&gt;        &lt;div id="Layer3" class="submenu" onMouseOver="MM_showHideLayers('Layer3','','show')" onMouseOut="MM_showHideLayers('Layer3','','hide')"&gt;  &lt;div class=""&gt;  &lt;ul&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li class="subright"&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="Layer4" class="submenu" onMouseOver="MM_showHideLayers('Layer4','','show')" onMouseOut="MM_showHideLayers('Layer4','','hide')"&gt;  &lt;div class=""&gt;  &lt;ul&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li class="subright"&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="Layer5" class="submenu" onMouseOver="MM_showHideLayers('Layer5','','show')" onMouseOut="MM_showHideLayers('Layer5','','hide')"&gt;  &lt;div class=""&gt;  &lt;ul&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li class="subright"&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="Layer6" class="submenu" onMouseOver="MM_showHideLayers('Layer6','','show')" onMouseOut="MM_showHideLayers('Layer6','','hide')"&gt;  &lt;div class=""&gt;  &lt;ul&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li class="subright"&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="Layer7" class="submenu" onMouseOver="MM_showHideLayers('Layer7','','show')" onMouseOut="MM_showHideLayers('Layer7','','hide')"&gt;  &lt;div class=""&gt;  &lt;ul&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;      &lt;li class="subright"&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;

希望在不同分辨率下div的相对位置能固定。
恳请各位帮忙！

[解决办法]
js 计算坐标

常用的是下面4个属性
offsetTop offsetLeft offsetHeight offsetWidth

js控制div层解决方案

热点推荐