javascript 弹出div实例

< html >

< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< title > </ title >
< style type ="text/css" >
.menuClass
{
    background-color : gray ;
    filter : alpha(opacity=50) ;
    margin-top : -2 ;
    width : 98px ;
    position : absolute ;
}

.menuMouseOver
{
    background-color : green ;
    filter : alpha(opacity=50) ;
    width : 98px ;
}

.menuMouseOut
{
    background-color : gray ;
    filter : alpha(opacity=50) ;
    width : 98px ;
}
</ style >
</ head >


< body >
< table >
    < tr >
        < td > < input type ="button" style ="width:100px" value ="dropButtom" onclick ="showDrop(getInfo(this))" /></ td >
        < td > < input type ="button" style ="width:100px" value ="dropButtom" onclick ="showDrop(getInfo(this))" /></ td >
        < td > < input type ="button" style ="width:100px" value ="dropButtom" onclick ="showDrop(getInfo(this))" /></ td >
        < td ></ td >
    </ tr >
    < tr >
        < td > < input type ="button" style ="width:100px" value ="dropButtom" onclick ="showDrop(getInfo(this))" /></ td >
        < td > < input type ="button" style ="width:100px" value ="dropButtom" onclick ="showDrop(getInfo(this))" /></ td >
        < td > < input type ="button" style ="width:100px" value ="dropButtom" onclick ="showDrop(getInfo(this))" /></ td >
        < td > < input type ="button" style ="width:100px" value ="dropButtom" onclick ="showDrop(getInfo(this))" /></ td >
    </ tr >
</ table >


</ body >
</ html >

< script language ="javascript" type ="text/javascript" >

var menu = [  // 菜单项数据
    { " url " : " 1.htm " ,
    " text " : " menu1 "
    },
    { " url " : " 2.htm " ,
    " text " : " menu2 "
    },
    { " url " : " 3.htm " ,
    " text " : " menu2 "
    }
];

function getInfo(o){ // 取得坐标
            var to = new Object();
            to.left = to.right = to.top = to.bottom = 0 ;
            var twidth = o.offsetWidth;
            var theight = o.offsetHeight;
            while (o != document.body){
                to.left += o.offsetLeft;
                to.top += o.offsetTop;
                o = o.offsetParent;
            }
            to.right = to.left + twidth;
            to.bottom = to.top + theight;
            return to;
        }
function showDrop(o){  // 弹出下拉框

      var div = document.createElement( " div " );
      div.style.top = o.bottom;
      div.style.left = o.left;
      var strHTML = "" ;
     
      div.className = " menuClass " ; // 层样式
      document.body.appendChild(div);
      // 添加菜单项
      for ( var i = 0 ;i < menu.length;i ++ )
      {
            var s = " <span οnmοuseοver=/"this.className='menuMouseOver'/" οnmοuseοut=/"this.className='menuMouseOut'/"  οnclick=/"menuClick(this,' " + menu[i].url + " ')/"> " + menu[i].text + " </span> " ;
            i != menu.length ? strHTML += s + " <br> " :strHTML += s;
           
      }
      div.innerHTML = strHTML;
}

function menuClick(obj,url){  // 菜单项单击事件
    obj.parentNode.parentNode.removeChild(obj.parentNode);
    alert(url);
}
</ script >