$(document).ready(function(){
//时间鼠标经过
$("ul li span").mouseover(function(){
$("#tips").remove();
var elem= $(this).parent();
var mTop=elem.offset().top;//获取该元素的top坐标
var mLeft=elem.offset().left;//获取该元素的left坐标
var addLeft=elem.width();//获取该元素的宽度
var finalTop=mTop-30;//获取最终元素出现的Top位置，此时-30个元素是提高这个Div的高度，让箭头指向对应行
var finalleft=mLeft+addLeft+20; // 获取最终元素出现Left的，对应行的左边加上行宽加上20个空元素
var num=$("li").index(elem)+1;
popDiv1(finalTop,finalleft,"提示框提醒你，这是第"+num+"行数据!");
})
})
//固定的信息框
function popDiv1(tops,lefts,messages)
{
var str="";
str="<div><img src='https://www.jb51.net/images/arrow.png' alt=''/><img src='https://www.jb51.net/images/close.jpg' alt=''/><img src='https://www.jb51.net/images/light.gif' alt=''/><p>"+messages+"</p></div>";
$('body').append(str);
$("#tips").css({"top":tops+"px","left":lefts+"px"});
}
function closeUp()
{
$("#tips").remove();
}
最终显示效果如下：
鼠标移动到相应的数据行上面，显示相应的提示框，右边的打叉小图标用以关闭整个弹出层...
设计小结：
这个设计过程的关键是position：absolute（绝对定位，作用是让层在页面上叠加），z-index（用以显示层的叠加次序），top、left（显示弹出页面坐标），（offset().left,offset().top）在页面上找到某个元素的坐标，位置找到了，就可以随意在它的周边定位弹出层了，其他的样式可以根据自己的美工需求随意调节...
源码下载
您可能感兴趣的文章: