首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
    • 继续研究随机分布层问题，求助yixianggao兄 [无满意答案结贴,结贴人:darkfxux7788]
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • darkfxux7788
    • 等级:
    • 可用分等级：
    • 总技术专家分：
    • 总技术专家分排名：
    • 揭帖率：
    发表于：2008-03-11 10:00:27 楼主
    我在昨天的随机分布层外面套了一个层，在里面的小层里分别有3个层，一随机，就出问题了，小层里面的东西就看不到了

    HTML code
    
<div class="x1">
  <div class="x2">
     <div class="x3" style="position:absolute; top:300px; left:260px;text-align:center;cursor:hand" id="dragDiv1">        
    <div class="knowledge_text"><div class="knowledge_w">数学数学数学数</div></div>
        <ul>
        <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="知识点详细信息" id="Button1" /></a></li>
        <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="选择知识点" id="Button2" /></a></li>
        <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="显示知识知识"  id="Button3"  onclick="TestShowDiv(event,this)"/></a></li>
        </ul>        
    </div>
            
            <div class="konwledge_node" style="position:absolute; top:250px; left:500px;text-align:center;cursor:hand" id="dragDiv2">                
                <div class="knowledge_text"><div class="knowledge_w">语文语文语文语文</div></div>
                
                <ul>
                    <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="知识点详细信息" id="Button3" /></a>
                    </li>
                    <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="选择知识点" id="Button4" /></a>
                    </li>
                    <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="显示知识知识"  id="Button5" onclick="TestShowDiv(event,this)"/></a></li>
                </ul>
                
            </div>
        </div>
        
    </div>


    这种情况下套用昨天的就不行了
    HTML code
    
<!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>noah</title>
    <style type="text/css">
div
{
    width:100px;
    height:100px;
    border: 1px dotted red;
    background-color: #ffffff;
    position:absolute;
    overflow:auto;
}
#divContainer
{
    width: 800px;
    height: 500px;
    border: 1px solid blue;
    background-color: #dddddd;
    overflow: hidden;
}

    </style>
</head>
<body>
    <h3>Div 不重叠随机分布！</h3>
    <div id="divContainer">
        <div>d01</div>
        <div>d02</div>
        <div>d03</div>
        <div>d04</div>
        <div>d05</div>
        <div>d06</div>
        <div>d07</div>
        <div>d08</div>
    </div>
</body>
<script type="text/javascript">
<!--

/*
 * 如果不希望压边，
 * 可以适当调大 iDivWidth 和 iDivHeight。
 * 对象过多会很慢
 */
var iDivWidth = 130;
var iDivHeight = 130;

var iMaxX = 800-100;
var iMaxY = 500-100;

var oPosition = new Object();
oPosition.x = 0;
oPosition.y = 0;

var aX = new Array();
var aY = new Array();

// 是否相互影响。
function isInteractOnEachOther(oPos)
{
    // For debug only.
    //alert(aX+"\n"+aY+"\n"+oPos.x+"\n"+oPos.y);
    var bIsInteract = false;

    for (var i=0; i<aX.length; i++)
    {
        if ( ((oPos.x>(aX[i]-iDivWidth))&&(oPos.x<(aX[i]+iDivWidth)))
            && ((oPos.y>(aY[i]-iDivHeight))&&(oPos.y<(aY[i]+iDivHeight))) )
        {
            bIsInteract = true;
            break;
        }
    }

    if (!bIsInteract)
    {
        aX[aX.length] = oPos.x;
        aY[aY.length] = oPos.y;
    }

    return bIsInteract;
}

var oContainer = document.getElementById("divContainer");

var obj_divs = oContainer.getElementsByTagName("div");

for(var i=0; i<obj_divs.length; i++)
{
    do
    {
        oPosition.x = Math.ceil(Math.random()*iMaxX);
        oPosition.y = Math.ceil(Math.random()*iMaxY);
    }
    while (isInteractOnEachOther(oPosition));

    obj_divs[i].style.left = oPosition.x + "px";
    obj_divs[i].style.top = oPosition.y + "px";
}

//-->
</script>
</html>
    50  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • tantaiyizu
    • 等级:
    • 可用分等级：
    • 总技术专家分：
    • 总技术专家分排名：

    • 2
    发表于：2008-03-11 10:07:131楼 得分:0
    -d
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • darkfxux7788
    • 等级:
    • 可用分等级：
    • 总技术专家分：
    • 总技术专家分排名：
    发表于：2008-03-11 10:27:552楼 得分:0
    能不能不通过getElementsByTagName，通过getElementsById来弄啊？
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • darkfxux7788
    • 等级:
    • 可用分等级：
    • 总技术专家分：
    • 总技术专家分排名：
    发表于：2008-03-11 11:35:003楼 得分:0
    掉下去了。。。。。。顶上来，希望高人指点
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • skyhaha
    • 等级:
    • 可用分等级：
    • 总技术专家分：
    • 总技术专家分排名：
    发表于：2008-03-11 13:15:454楼 得分:0
    function getElementXY (oElement){
    var oRetPos = {x:oElement.offsetLeft, y:oElement.offsetTop};
    if(oElement.offsetParent)
    {
    var oTmpPos = this.getElementXY(oElement.offsetParent);
    oRetPos.x += oTmpPos.x;
    oRetPos.y += oTmpPos.y;
    }
    return oRetPos;
    }
    也许你能用到
    作用：获取节点在当前文档中的位置。参数：Element。返回值：纵坐标和横坐标的一个对象。
    访问：var aaa = getElementXY(node); aaa.x;aaa.y;
    你可以试一试用CSS的绝对定位来做。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • darkfxux7788
    • 等级:
    • 可用分等级：
    • 总技术专家分：
    • 总技术专家分排名：
    发表于：2008-03-11 13:22:445楼 得分:0
    绝对定位那就不能随机分布了吧？
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • skyhaha
    • 等级:
    • 可用分等级：
    • 总技术专家分：
    • 总技术专家分排名：
    发表于：2008-03-11 15:15:086楼 得分:0
    你把节点的X,Y乘随机数啊，绝对定位是根据body来定的，不是根据某个节点来定的，不过你也可以根据某个节点来，只不过范围就在这个节点之内了。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • darkfxux7788
    • 等级:
    • 可用分等级：
    • 总技术专家分：
    • 总技术专家分排名：
    发表于：2008-03-11 15:27:287楼 得分:0
    我的问题是这样的
    HTML code
    
<!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>noah</title>
    <style type="text/css">
div
{
    width:100px;
    height:100px;
    border: 1px dotted red;
    background-color: #ffffff;
    position:absolute;
    overflow:auto;
}
#divContainer
{
    width: 800px;
    height: 500px;
    top:130;
    border: 1px solid blue;
    background-color: #dddddd;
    overflow: hidden;
}
#c1
{
    width:10;
    height:10;
    border: 1px dotted red;
    background-color:#ffffff;
}
    </style>
</head>
<body>
    <h3>Div 不重叠随机分布！</h3>
    <div id="divContainer">
        <div><div id="c1">d01-1</div><div id="c1">d01-2</div>d01</div>
        <div>d02</div>
        <div>d03</div>
        <div>d04</div>
        <div>d05</div>
        <div>d06</div>
        <div>d07</div>
        <div>d08</div>
    </div>
</body>
<script type="text/javascript">
<!--

/*
 * 如果不希望压边，
 * 可以适当调大 iDivWidth 和 iDivHeight。
 * 对象过多会很慢
 */
var iDivWidth = 130;
var iDivHeight = 130;

var iMaxX = 800-100;
var iMaxY = 500-100;

var oPosition = new Object();
oPosition.x = 0;
oPosition.y = 0;

var aX = new Array();
var aY = new Array();

// 是否相互影响。
function isInteractOnEachOther(oPos)
{
    // For debug only.
    //alert(aX+"\n"+aY+"\n"+oPos.x+"\n"+oPos.y);
    var bIsInteract = false;

    for (var i=0; i<aX.length; i++)
    {
        if ( ((oPos.x>(aX[i]-iDivWidth))&&(oPos.x<(aX[i]+iDivWidth)))
            && ((oPos.y>(aY[i]-iDivHeight))&&(oPos.y<(aY[i]+iDivHeight))) )
        {
            bIsInteract = true;
            break;
        }
    }

    if (!bIsInteract)
    {
        aX[aX.length] = oPos.x;
        aY[aY.length] = oPos.y;
    }

    return bIsInteract;
}

var oContainer = document.getElementById("divContainer");

var obj_divs = oContainer.getElementsByTagName("div");

for(var i=0; i<obj_divs.length; i++)
{
    do
    {
        oPosition.x = Math.ceil(Math.random()*iMaxX);
        oPosition.y = Math.ceil(Math.random()*iMaxY);
    }
    while (isInteractOnEachOther(oPosition));

    obj_divs[i].style.left = oPosition.x + "px";
    obj_divs[i].style.top = oPosition.y + "px";
}

//-->
</script>
</html>


    里面的小层再放层就出错了，运行看看吧
    修改 删除 举报 引用 回复
    网站简介－广告服务－网站地图－帮助－联系方式－诚聘英才－English－ 问题报告
    北京创新乐知广告有限公司 版权所有 京 ICP 证 070598 号
    世纪乐知(北京)网络技术有限公司 提供技术支持
    Copyright © 2000-2008, CSDN.NET, All Rights Reserved