将鼠标移到列表里的名字时，在名字旁边展开一个层，显示该人的详细信息

最新推荐文章于 2024-11-27 18:02:04 发布

baobeituping

最新推荐文章于 2024-11-27 18:02:04 发布

阅读量231

点赞数

分类专栏： JS篇文章标签： CSS

JS篇专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的自定义员工信息弹窗功能。该功能可根据鼠标位置显示包含员工照片、姓名、职务等详细信息的弹窗，并提供了关闭按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
#popupcontent{ position: absolute; visibility: hidden; overflow: hidden; border:1px solid #CCC; background-color:#F9F9F9; border:1px solid #333; padding:5px;}

</style>

上面的样式是定义弹出表格的样式
<script>
var baseText = null;
function showPopup(w,h,HtmlID,PerID,PerName,PerPartName,PerExtension,PerTnum,PerEmail,PerPhotoFile,PerSeatID)
{
var ID=PerID;
var Name=PerName;
var Email=PerEmail;
var Tnum=PerTnum;
var Extension=PerExtension;
var DeptName="";
var PartName=PerPartName;
var PhotoFile=PerPhotoFile;
var SeatID=PerSeatID;
var tempobj = document.getElementById(HtmlID);
//下面的函数是为了得到鼠标所移动到位置的网页里面的坐标

var pos = getAbsolutePosition(tempobj);
//下面就是根据所取得的网页里的坐标显示层的位置
var popUp = document.getElementById("popupcontent");
popUp.style.top = pos.y+"px";
popUp.style.left = pos.x+"px";
popUp.style.width = w + "px";
popUp.style.height = h + "px";
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText +
"<div id=\"statusbar\" ><table width=\"440\" border=\"0\" align=\"center\" cellpadding=\"3\" cellspacing=\"1\" bgcolor=\"#CCCCCC\" style=\"font-size:12px; line-height:23px\">"
+"<tr> <td width=\"38%\" rowspan=\"7\" align=\"center\" bgcolor=\"#FFFFFF\" style=\"padding:6px; background:#EEE\"><img src='"+PhotoFile+"'></td> <td bgcolor=\"#FFFFFF\">员工编码："+ID+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">姓       名："+Name+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">座位号："+SeatID+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">职       务："+PartName+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">分       机："+Extension+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">T        数："+Tnum+"</td></tr>"
+"<tr><td bgcolor=\"#FFFFFF\">邮       箱："+Email+"</td></tr>"
+"<tr><td colspan=\"2\" align=\"center\" bgcolor=\"#FFFFFF\" style=\"padding:6px 0\"><input name=\"maximbutton\" class=\"tbbutton\" type=\"button\" class=\"tbbutton\" value=\"关闭\" onclick=\"hidePopup();\"></td></tr>"

+"</table>"
+"</div>";
var sbar = document.getElementById("statusbar");
//sbar.style.marginTop = (parseInt(h)-60) + "px";
popUp.style.visibility = "visible";
}

//隐藏弹出表格函数
function hidePopup()
{
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
}

//获得网页坐标函数
function getAbsolutePosition(obj)
{
    position = new Object();
    position.x = 0;
    position.y = 0;
    var tempobj = obj;
    while(tempobj!=null && tempobj!=document.body)
    {
    position.x += tempobj.offsetLeft + tempobj.clientLeft;
    position.y += tempobj.offsetTop + tempobj.clientTop;
    tempobj = tempobj.offsetParent
    }
    return position;
}
</script>
</head>

//网页中引用以上函数的代码

//${seat.perID}等参数是从数据库中取得的。
                        <a href="#" onmouseover="showPopup(460,320,'perID_${index}','${seat.perID}','${seat.pName }','${seat.pPartName }','${seat.pExtension }','${seat.pTnum }','${seat.pEmail }','${path}${seat.pPhotoFile }','${title1 }-${seat.name}');" id='perID_${index}'>
             <font color="blue">${seat.perName }</font></a>
                    </td>