Heim > php教程 > PHP开发 > jquery steuert die Positionseffekte der absoluten CSS-Positionierung, z. B. das Bewegen der Maus auf die Symbolanzeigeebene, um relevante Informationen anzuzeigen

jquery steuert die Positionseffekte der absoluten CSS-Positionierung, z. B. das Bewegen der Maus auf die Symbolanzeigeebene, um relevante Informationen anzuzeigen

高洛峰
Freigeben: 2016-11-24 09:35:02
Original
1186 Leute haben es durchsucht

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

这里是内容,也可以通过参数来传递
";
//Schreiben Sie über insertAdjacentHTML in HTML (Firefox unterstützt diesen Parameter nicht, aber es ist möglich, Firefox über Kompatibilitätscode mit dem Attribut insertAdjacentHTML kompatibel zu machen. Der Kompatibilitätscode ist nicht lang, nur Dutzende Zeilen)
document.body .insertAdjacentHTML("afterBegin", x);
}, function () {
//Wenn sich die Maus herausbewegt, entferne dieses Div durch closeDiv()
closeDiv("description" );
} )

/* Sart-Remove-Element-Methode*/
function closeDiv(obj) {
var divobj = document.getElementById(obj); removeChild(divobj);
}
/* Endmethode zum Entfernen von Elementen*/

/* Kompatibilitätscode starten, um Firefox mit dem insertAdjacentHTML-Attribut kompatibel zu machen*/
if (typeof HTMLElement != "undefiniert" && !HTMLElement.prototype.insertAdjacentElement) {
HTMLElement.prototype.insertAdjacentElement = function (where, parsedNode) {
switch (where) {
case "beforeBegin":
this.parentNode .insertBe fore(parsedNode, this) ;
case "afterBegin":
this.insertBefore(parsedNode, this.firstChild);
            case "beforeEnd"                                                                                                                                             Fall "beforeEnd":                                                   ;
break;
case "afterEnd":
if (this.nextSibling) {
this.parentNode.insertBefor e(parsedNode , this.nextSibling);
         } else {
                                           
var parsedHTML = r.createContextualFragment( htmlStr);
this.insertAdjacentElement(where, parsedHTML); 🎜> this.insertAdjacentElement(where, parsedText);
}
/ * Endkompatibilitätscode macht Firefox mit dem insertAdjacentHTML-Attribut kompatibel*/

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage