Javascript：實操---右鍵顯示列表

標籤：style   color   java   os   io   strong   for   ar   

JS部分

<script type="text/javascript">

window.onload=function(){

　　var oUl1=document.getElementById("ul1");

　　var oLi1=oUl1.children;

 

　　var bodyWidth=document.documentElement.clientWidth||document.body.clientWidth;

　　var bodyHeight=document.documentElement.clientHeight||document.body.clientHeight;

　　

　　document.oncontextmenu=function(e){

　　　　oUl1.style.display="block";

　　　　var bodyScrolltop=document.body.scrollTop;

　　　　var iWidth=oUl1.offsetWidth;

　　　　var iheight=oUl1.offsetHeight;

　　　　e=e||window.event;

　　　　var x=e.clientX;

　　　　var y=e.clientY;

 

　　　　if(x<iWidth/2){

　　　　　　oUl1.style.left=0;

　　　　}else if(x>bodyWidth-iWidth/2){

　　　　　　oUl1.style.left=bodyWidth-iWidth+"px";

　　　　}else{

　　　　　　oUl1.style.left=x-iWidth/2+"px";

　　　　}

 

　　　　if(y>bodyHeight-iHeight){

　　　　　　oUl1.style.top=bodyHeight-iHeight+bodyScrolltop+"px";

　　　　}else{

　　　　　　oUl1.style.top=y+bodyScrolltop+"px";

　　　　}

 

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

　　　　　　oLi1[i].index=i;

　　　　　　oLi1[i].onmouseover=function(){

　　　　　　　　var oUl2=oLi1[this.index].children[0];

　　　　　　　　oUl2.style.display="block";

　　　　　　　　

　　　　　　　　var iWidth2=oUl2.offsetWidth;

　　　　　　　　var iHeight2=oUl2.offsetHeight;

 

　　　　　　　　if(x>bodyWidth-iWidth-iWidth2){

　　　　　　　　　　oUl2.style.left=-iWidth+"px";

　　　　　　　　}

　　　　　　　　else{

　　　　　　　　　　oUl2.style.left=iWidth+"px";

　　　　　　　　}

　　　　　　　　oUl2.style.top=oLi1[this.index].offsetHeight*this.index+"px";

　　　　　　　　oLi1[this.index].onmouseout=function(){

　　　　　　　　　　oUl2.style.display="none";

　　　　　　　　}

　　　　　　}

　　　　}

　　　　return false;

　　}　　

　　document.onclick=function(){

　　　　oUl1.style.display="none";

　　}

}

</script>

CSS部分

<style type="text/css">
*{margin:0; padding:0;}
body{height:3000px;}
#ul1{display:none; position:absolute; left:0px; top:0px;}
/*#ul2{display: block;}*/
li{list-style:none; border:1px solid #ccc; width:100px;}
#ul1>li ul{display:none; position:absolute; left:0px; top:0px;}

</style>

HTML部分

<ul id="ul1">
    <li>列表1
        <ul>
            <li>子列表1.0</li>
            <li>子列表1.1</li>
        </ul>
    </li>
    <li>列表2
        <ul>
            <li>子列表2.0</li>
            <li>子列表2.1</li>
        </ul>
    <li>列表3
        <ul>
            <li>子列表3</li>
        </ul>
    <li>列表4
        <ul>
            <li>子列表4</li>
        </ul>
    <li>列表5
        <ul>
            <li>子列表5</li>
        </ul>
    </li>
    <li>列表6
        <ul>
            <li>子列表6</li>
        </ul>
    </li>
    <li>列表7
        <ul>
            <li>子列表7</li>
        </ul>
    </li>
    <li>列表8
        <ul>
            <li>子列表8</li>
        </ul>
    </li>
    <li>列表9
        <ul>
            <li>子列表9</li>
        </ul>
    </li>
    <li>列表10
        <ul>
            <li>子列表10.0</li>
            <li>子列表10.1</li>
        </ul>
    </li>
</ul>