jquery控制css绝对定位位置效果
效果如下图:当鼠标指到用户头像上时会在头像旁边显示一个div来显示用户的信息我大概分析了下应该用的jquery控制绝对定位的topleft但是不知道该怎么做?希望大家可以...
效果如下图:
当鼠标指到用户头像上时会在头像旁边显示一个div来显示用户的信息
我大概分析了下应该用的jquery控制绝对定位的top left
但是不知道该怎么做?希望大家可以提供下代码或者思路,感激~~~ 展开
当鼠标指到用户头像上时会在头像旁边显示一个div来显示用户的信息
我大概分析了下应该用的jquery控制绝对定位的top left
但是不知道该怎么做?希望大家可以提供下代码或者思路,感激~~~ 展开
展开全部
$(获取到需要弹出浮动框的元素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 属性 */
//鼠标移动时
//获取到需要弹出浮动框的元素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 属性 */
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询