<style>
#top{
POSITION: relative;
width: 110px;
background-color: #999999;
}
#a,#b,#c,#d,#e{
width: 300px;
height: 80px;
}
#a{
margin-top: 200px;
margin-left: 150px;
background-color: #FF0000;}
#b{
margin-top: 300px;
margin-right: 30px;
background-color: #33FF99;
}
#c{
color: #0033FF;
margin-top: 520px;
margin-left: 500px;
background-color: #99CC00;
}
#d{
margin-top: 720px;
margin-left: 300px;
background-color: #00FF00;
}
#e{
margin-top: 920px;
margin-left: 600px;
background-color: #6633FF;
}
</style>
<body>
<div id="top">top</div>
<div id=a onclick="fw();">a</div>
<div id=b onclick="fw();">b</div>
<div id=c onclick="fw();">c</div>
<div id=d onclick="fw();">d</div>
<div id=e onclick="fw();">e</div>
</body>
<script>
function fw(){  //想要鼠标点击a或b或c..中的一个元素,然后top元素就移动到这个点过的元素周边!!!
}
</script>

解决方案 »

  1.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
      </head><body>
      <style>
    #top{
        POSITION:absolute;
        width: 110px;
        background-color: #999999;
    left:10px;
    }
    #a,#b,#c,#d,#e{
        width: 300px;
        height: 80px;
    }
    #a{
        margin-top: 200px;
        margin-left: 150px;
        background-color: #FF0000;}
    #b{
        margin-top: 300px;
        margin-right: 30px;
        background-color: #33FF99;
    }
    #c{
        color: #0033FF;
        margin-top: 520px;
        margin-left: 500px;
        background-color: #99CC00;
    }
    #d{
        margin-top: 720px;
        margin-left: 300px;
        background-color: #00FF00;
        }
    #e{
        margin-top: 920px;
        margin-left: 600px;
        background-color: #6633FF;
    }
    </style>
    <body>
    <div style="position:relative; width:100%;">
    <div id="top">top</div>
    <div id="a" onclick="fw();">a</div>
    <div id="b" onclick="fw();">b</div>
    <div id="c" onclick="fw();">c</div>
    <div id="d" onclick="fw();">d</div>
    <div id="e" onclick="fw();">e</div>
    </div>
    </body>
    <script>
    function fw(){  //想要鼠标点击a或b或c..中的一个元素,然后top元素就移动到这个点过的元素周边!!!
    document.getElementById('top').style.left = event.clientX + 'px';
    document.getElementById('top').style.top = event.clientY + 'px';}
    </script>
    </body>
    </html>
      

  2.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
      </head><body>
      <style>
    #top{
        POSITION:absolute;
        width: 110px;
        background-color: #999999;
        left:10px;
    }
    #a,#b,#c,#d,#e{
        width: 300px;
        height: 80px;
    }
    #a{
        margin-top: 200px;
        margin-left: 150px;
        background-color: #FF0000;}
    #b{
        margin-top: 300px;
        margin-right: 30px;
        background-color: #33FF99;
    }
    #c{
        color: #0033FF;
        margin-top: 520px;
        margin-left: 500px;
        background-color: #99CC00;
    }
    #d{
        margin-top: 720px;
        margin-left: 300px;
        background-color: #00FF00;
        }
    #e{
        margin-top: 920px;
        margin-left: 600px;
        background-color: #6633FF;
    }
    </style>
    <body>
    <div style="position:relative; width:100%;">
    <div id="top">top</div>
    <div id="a" onclick="fw(event);">a</div>
    <div id="b" onclick="fw(event);">b</div>
    <div id="c" onclick="fw(event);">c</div>
    <div id="d" onclick="fw(event);">d</div>
    <div id="e" onclick="fw(event);">e</div>
    </div>
    </body>
    <script>
    function fw(event){  //想要鼠标点击a或b或c..中的一个元素,然后top元素就移动到这个点过的元素周边!!!
    var event = event || window.event;
        document.getElementById('top').style.left = event.clientX + 'px';
    if(!document.all){
         document.getElementById('top').style.top = document.documentElement.scrollTop + event.clientY - 180 + 'px';
    }else{
    document.getElementById('top').style.top = document.documentElement.scrollTop + event.clientY + 'px';
    }}
    </script>
    </body>
    </html>