>  기사  >  php教程  >  jquery는 관련 정보를 표시하기 위해 마우스를 아이콘 표시 레이어로 이동하는 등 CSS 절대 위치 지정 위치 효과를 제어합니다.

jquery는 관련 정보를 표시하기 위해 마우스를 아이콘 표시 레이어로 이동하는 등 CSS 절대 위치 지정 위치 효과를 제어합니다.

高洛峰
高洛峰원래의
2016-11-24 09:35:021098검색

[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 = "

这里是内容,也可以通过参数来传递
";
//insertAdjacentHTML을 통해 html로 작성(Firefox는 이 매개변수를 지원하지 않지만, 호환성 코드를 통해 insertAdjacentHTML 속성과 Firefox를 호환되게 만드는 것이 가능합니다. 호환성 코드는 길지 않고 수십 줄에 불과합니다)
document.body .insertAdjacentHTML("afterBegin", x);
}, function () {
//마우스가 밖으로 나가면 closeDiv()를 통해 이 div를 제거합니다.
closeDiv("description" );
} )

/* 요소 제거 방법*/
function closeDiv(obj) {
var divobj = document.getElementById(obj); RemoveChild(divobj);
}
/* 요소 제거를 위한 종료 메소드*/

/* Firefox가 insertAdjacentHTML 속성과 호환되도록 호환성 코드 시작*/
if (HTMLElement 유형 != "정의되지 않음" && !HTMLElement.prototype.insertAdjacentElement) {
HTMLElement.prototype.insertAdjacentElement = 함수(where, parsedNode) {
스위치(where) {
case "beforeBegin":
this.parentNode .insertBe fore(parsedNode, this) ;
break;
case "afterBegin":
this.insertBefore(parsedNode, this.firstChild);
break;
           case "beforeEnd":       ~ 사례 "beforeEnd":                                                   ;
break;
case "afterEnd":
if (this.nextSibling) {
this.parentNode.insertBefore (parsedNode , this.nextSibling)
         } else { var parsedHTML = r.createContextualFragment( htmlStr);
this.insertAdjacentElement(where, parsedHTML);
}
HTMLElement .prototype.insertAdjacentText = function(where, txtStr) {
varparsedText = document.createTextNode(txtStr); 🎜> this.insertAdjacentElement(where,parsedText);
};
}
/ * 호환성 코드를 종료하면 Firefox가 insertAdjacentHTML 속성과 호환됩니다.*/

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.