js 问题子div根据父位置移动

mysite365 2009-03-06 11:55:25



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"　

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>js仿taobao效果</title>

<style type="text/css">

*{ margin:0;padding:0;}

h5{ float:left;}

a{ text-decoration:underline; cursor:pointer; font-weight:bold;}

dl{ height:18px; line-height:18px; background:#f1ecec; padding:0 10px;}

dt,.normal{ float:left; padding:0 9px; border-right:1px solid #ccc; text-

decoration:none; width:auto; cursor:pointer;}

dt.over{ position:relative;border:1px solid #f4d8d8; padding:0 10px 0px　

10px; border-bottom:1px solid #f7e8e8; margin:-1px 0 0 -1px; z-index:1000;　

color:#ff6026; text-decoration:none; background:#f7e8e8; height:22px; }

li{ float:left; list-style-type:none; margin:5px 10px; width:120px;}

dl dd{ position:absolute; width:725px; left:0;top:40px!important; border:1px　

solid #f4d8d8; background:#f7e8e8;　

filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120,　

color=#cccccc); padding:10px 0;}

.block{ display:block;}

.none{ display:none;}

</style>

<script language="javascript">

function $(str){ return document.getElementById(str);}

function $$(str){ return document.getElementsByTagName(str);}

function changeMenu(thisObj,num){

　if(thisObj.className=="over") return false;

　var tabObj=thisObj.parentNode.getAttribute("id");

　var obj_dt=$("warpper").getElementsByTagName("dt");

   

　for(var i=0;i<obj_dt.length;i++){

　 if(i==num){

　　thisObj.className="over";

　　$("c"+(i+1)).className="block";          						

　 }

　 else{

　　obj_dt[i].className="normal";

　　$("c"+(i+1)).className="none";

　 }

　}

}

</script>

</head>

<body>

<dl id="warpper">

　<h5>拼音检索：</h5>

　<dt onmouseover="changeMenu(this,0);">a</dt>

　<dd id="c1" class="none">

　 <ul>

　　<li><a herf="#">Adidas</a></li>

　　<li><a herf="#">AEE/爱意</a></li>

　　<li><a herf="#">AF</a></li>

　　<li><a herf="#">AF棒球帽</a></li>

　　<li><a herf="#">Agatha</a></li>

　　<li><a herf="#">Albion/奥尔滨</a></li>

　　<li><a herf="#">AMD</a></li>

　　<li><a herf="#">Andox</a></li>

　　<li><a herf="#">Artini</a></li>

　　<li><a herf="#">爱普生</a></li>

　 </ul>

　</dd>

　<dt onmouseover="changeMenu(this,1);">b</dt>

　<dd id="c2" class="none">

　 <ul>

　　<li><a herf="#">boy</a></li>

　　<li><a herf="#">best</a></li>

　 </ul>

　</dd>

　<dt onmouseover="changeMenu(this,2);">c</dt>

　<dd id="c3" class="none">

　 <ul>

　　<li><a herf="#">charge</a></li>

　　<li><a herf="#">ciname</a></li>

　　<li><a herf="#">class</a></li>

　 </ul>

　</dd>

　<dt onmouseover="changeMenu(this,3);">d</dt>

　<dd id="c4" class="none">

　 <ul>

　　<li><a herf="#">doy</a></li>

　　<li><a herf="#">dunch</a></li>

　　<li><a herf="#">dirty</a></li>

　　<li><a herf="#">degenence</a></li>

　 </ul>

　</dd>

　<dt onmouseover="changeMenu(this,4);">e</dt>

　<dd id="c5" class="none">

　 <ul>

　　<li><a herf="#">eccold</a></li>

　　<li><a herf="#">edcadn</a></li>

　　<li><a herf="#">elecction</a></li>

　　<li><a herf="#">easdffsd</a></li>

　　<li><a herf="#">eback</a></li>

　 </ul>

　</dd>

</dl>

</body>

</html>

我的问题是：

先得到A,B到Z的位置，然后在显示A像对应的Dd的位置，设置dd的位置相对A的位置向左150px，dd的宽度不能变化

...全文

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

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

mysite365 2009-03-07

打赏
举报

[Quote=引用 6 楼 xiaofanku 的回复:]
设置dd的位置相对A的位置向左150px
A{display:relative}
dd{padding-left:150px;}
[/Quote]

这样设置好像不能达到“dd的位置相对A的位置向左150px ”吧？？

街头小贩 2009-03-07

打赏
举报

设置dd的位置相对A的位置向左150px
A{display:relative}
dd{padding-left:150px;}

mysite365 2009-03-07

打赏
举报

现在把鼠标移动到B字母上面，显示一个层
属性：
dd{ position:absolute; width:725px; left:0;top:40px!important; border:1px　
solid #f4d8d8; background:#f7e8e8;　
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=120,　
color=#cccccc); padding:10px 0;}

他的位置也B字母没关系，

我现在想设置dd 的

随着鼠标移动到不同字母的位置相应移动，因为不同字母的位置也不一样，

意思就是一个框框随着鼠标位置移动而移动、、

一把编程的菜刀 2009-03-07

打赏
举报

表达意思不够明确

jim8590251 2009-03-06

打赏
举报

给你发个JS函数,取得位置的



/// <summary>

/// 计算对象所在页面的绝对位置(左上角)

/// </summary>

/// <param name="obj">对象</param>

/// <returns>绝对位置(左上角)</returns>

function getPosition(obj)

{

    var pt = { top:obj.offsetTop, left:obj.offsetLeft };

    while (obj = obj.offsetParent)

    {

        //top.window.status += "." + obj.tagName;

        if (obj.scrollTop || obj.scrollTop == 0)

        {

            pt.top -= obj.scrollTop;

        }

        if (obj.scrollLeft || obj.scrollLeft == 0)

        {

            pt.left -= obj.scrollLeft;

        }

        pt.top += obj.offsetTop;

        pt.left += obj.offsetLeft;

    }

    return pt;

}