鼠标经过,在鼠标上方弹出气泡

大四下学期为学校的就业中心做前端开发,其中一个效果想做成下图所示的效果,但是气泡的位置一直无法按照预期呈现。放大或缩小页面会影响气泡的位置,滚动滚动条会影响气泡的位置,总之,问题多多。今天(2016/7/9)没有去实验室,鼓捣了一下,没想到弄好了。现将关键代码贴在下面,以方便他人和自己日后使用。

QQ截图20160709193155

首先,设置气泡的postion为absolute;然后通过js,设置当鼠标经过时显示气泡,代码如下

function showRecruitPlan(year,month,day,x){
    var recruitPlanDiv=document.getElementById("recruitPlan");
    var recruitPlanTitleDiv=document.getElementById("recruitPlanTitle");
    var left;
    var top;
    if($(x).hasClass('recruitActive'))
    {
        left = x.getBoundingClientRect().left+(document.body.scrollLeft||document.documentElement.scrollLeft);
    top = x.getBoundingClientRect().top+(document.body.scrollTop||document.documentElement.scrollTop);
        recruitPlanTitleDiv.innerHTML = year+'/'+month+'/'+day + ' 招聘安排' ;
        creatOneDayRecruitPlanForCalendar(year,month,day);
        recruitPlanDiv.style.top=top-80+'px';
        recruitPlanDiv.style.left= left-88+'px';
        recruitPlanDiv.style.display = 'block';
    }
}

代码中的x是鼠标经过时的对象,在本例中是<td></td>标签。

上面代码中,最关键是的获取鼠标当前的位置,即left和top。先前,在网上查的结果是:

left = x.getBoundingClientRect().left+document.documentElement.scrollLeft;
top = x.getBoundingClientRect().top+document.documentElement.scrollTop;

但是,

document.documentElement.scrollLeft
document.documentElement.scrollLeft

的值始终都是0,后来,改为

left = x.getBoundingClientRect().left+(document.body.scrollLeft||document.documentElement.scrollLeft);
top = x.getBoundingClientRect().top+(document.body.scrollTop||document.documentElement.scrollTop);

才可以正常工作。

代码中的80和88是气泡width和height的一半,目的是对齐。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

1 + 16 =

6 + 1 =