[javascript]
$(获取到需要弹出浮动框的元素obj).hover(function () {
//鼠标移动时
//获取到需要弹出浮动框的元素obj
divobj = document.getelementbyid(obj);
//获取obj的位置,left及top,ie及ff3.0以上都支持
divobjleft = divobj.getboundingclientrect().left;
divobjtop = divobj.getboundingclientrect().top;
//为弹出的div的left,top赋值
divobjx = divobjleft + 0 /* 弹出的div距离obj左边的距离,取实际值 */;
divobjy = divobjtop + 50 /* 弹出的div距离obj顶部的距离,取实际值 */;
// 定义弹出div
var x = <div id='description' class='help' style='left:" + divobjx + "px; top:" + divobjy + "px;'>这里是内容,也可以通过参数来传递</div>;
//通过insertadjacenthtml来写入到html内(这个参数火狐不支持,但是可能通过兼容代码 让火狐兼容insertadjacenthtml 属性,兼容代码不长,就几十行)
document.body.insertadjacenthtml(afterbegin, x);
}, function () {
//鼠标移出时,通过closediv()移除这个div
closediv(description);
})
/* sart 移除元素方法 */
function closediv(obj) {
var divobj = document.getelementbyid(obj);
divobj.parentnode.removechild(divobj);
}
/* end移除元素方法 */
/* start 兼容代码 让火狐兼容insertadjacenthtml 属性 */
if (typeof htmlelement != undefined && !htmlelement.prototype.insertadjacentelement) {
htmlelement.prototype.insertadjacentelement = function (where, parsednode) {
switch (where) {
case beforebegin:
this.parentnode.insertbefore(parsednode, this);
break;
case afterbegin:
this.insertbefore(parsednode, this.firstchild);
break;
case beforeend:
this.appendchild(parsednode);
break;
case afterend:
if (this.nextsibling) {
this.parentnode.insertbefore(parsednode, this.nextsibling);
} else {
this.parentnode.appendchild(parsednode);
}
break;
}
};
htmlelement.prototype.insertadjacenthtml = function (where, htmlstr) {
var r = this.ownerdocument.createrange();
r.setstartbefore(this);
var parsedhtml = r.createcontextualfragment(htmlstr);
this.insertadjacentelement(where, parsedhtml);
};
htmlelement.prototype.insertadjacenttext = function (where, txtstr) {
var parsedtext = document.createtextnode(txtstr);
this.insertadjacentelement(where, parsedtext);
};
}
/* end 兼容代码 让火狐兼容insertadjacenthtml 属性 */