Beispiel für die Verwendung eines Floating-Plug-Ins mit fester Ebene für jquery an einer beliebigen Position_jquery

Das Beispiel in diesem Artikel beschreibt die Verwendung des JQuery-Floating-Fixed-Layer-Plug-Ins an einer beliebigen Position. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Hinweis: Sie können die angegebene Ebene an eine beliebige Position auf der Webseite verschieben. Wenn die Bildlaufleiste scrollt, bleibt sie an der aktuellen Position und flackert nicht

Änderung vom 10.06.2009: Ändern Sie die Art und Weise, wie das Plug-in feste Floating-Layer implementiert, und verwenden Sie einen großen festen Layer für die Positionierung
16.07.2009 Änderung: Das Problem, dass es unter IE6 nicht oben behoben werden konnte

, wurde behoben

Änderung vom 11.09.5: Wenn Sie die absolute Position der Ebene anpassen, fügen Sie die Beurteilung hinzu, wenn top ein Nullwert ist
Diesmal wurde die Methode von Tianyas neuer Seite
gestohlen Nach vielen Tests gibt es grundsätzlich keine Fehler ~

Anruf:

1 Aufruf ohne Parameter: standardmäßig in der unteren rechten Ecke schweben

$("#id").floatdiv();

2 Eingebauter Schwimmer mit fester Position

//右下角  
$("#id").floatdiv("rightbottom");  
//左下角  
$("#id").floatdiv("leftbottom");  
//右下角  
$("#id").floatdiv("rightbottom");  
//左上角  
$("#id").floatdiv("lefttop");  
//右上角  
$("#id").floatdiv("righttop");  
//居中  
$("#id").floatdiv("middle");  

Vier neue Methoden mit fester Position hinzugefügt

middletop (oben zentriert), middlebottom (unten zentriert), leftmiddle, rightmiddle

3 Benutzerdefinierter Positionsschwimmer

$("#id").floatdiv({left:"10px",top:"10px"}); Stellen Sie mit den oben genannten Parametern die schwebende Ebene auf 10 Pixel von links und 10 Pixel von oben ein

jQuery.fn.floatdiv=function(location){  
  //判断浏览器版本  
  var isIE6=false;  
  var Sys = {};  
  var ua = navigator.userAgent.toLowerCase();  
  var s;  
  (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;  
  if(Sys.ie && Sys.ie=="6.0"){  
    isIE6=true;  
  }  
  var windowWidth,windowHeight;//窗口的高和宽  
  //取得窗口的高和宽  
  if (self.innerHeight) {  
    windowWidth=self.innerWidth;  
    windowHeight=self.innerHeight;  
  }else if (document.documentElement&&document.documentElement.clientHeight) {
    windowWidth=document.documentElement.clientWidth;  
    windowHeight=document.documentElement.clientHeight;  
  } else if (document.body) {  
    windowWidth=document.body.clientWidth;  
    windowHeight=document.body.clientHeight;  
  }  
  return this.each(function(){  
    var loc;//层的绝对定位位置  
    var wrap=$("<div></div>");  
    var top=-1;  
    if(location==undefined || location.constructor == String){  
      switch(location){  
        case("rightbottom")://右下角  
          loc={right:"0px",bottom:"0px"};  
          break;  
        case("leftbottom")://左下角  
          loc={left:"0px",bottom:"0px"};  
          break;   
        case("lefttop")://左上角  
          loc={left:"0px",top:"0px"};  
          top=0;  
          break;  
        case("righttop")://右上角  
          loc={right:"0px",top:"0px"};  
          top=0;  
          break;  
        case("middletop")://居中置顶  
          loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};  
          top=0;  
          break;  
        case("middlebottom")://居中置低  
          loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};  
          break;  
        case("leftmiddle")://左边居中  
          loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};  
          top=windowHeight/2-$(this).height()/2;  
          break;  
        case("rightmiddle")://右边居中  
          loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};  
          top=windowHeight/2-$(this).height()/2;  
          break;  
        case("middle")://居中  
          var l=0;//居左  
          var t=0;//居上  
          l=windowWidth/2-$(this).width()/2;  
          t=windowHeight/2-$(this).height()/2;  
          top=t;  
          loc={left:l+"px",top:t+"px"};  
          break;  
        default://默认为右下角  
          location="rightbottom";  
          loc={right:"0px",bottom:"0px"};  
          break;  
      }  
    }else{  
      loc=location;  
      alert(loc.bottom);  
      var str=loc.top;  
      //09-11-5修改：加上top为空值时的判断  
      if (typeof(str)!= 'undefined'){  
        str=str.replace("px","");  
        top=str;  
      }  
    }  
    /*fied ie6 css hack*/  
    if(isIE6){  
      if (top>=0)  
      {  
        wrap=$("<div style=\"top:e&shy;xpression(documentElement.scrollTop+"+top+");\"></div>");  
      }else{  
        wrap=$("<div style=\"top:e&shy;xpression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");
      }  
    }  
    $("body").append(wrap);  
    wrap.css(loc).css({position:"fixed",z_index:"999"});  
    if (isIE6)  
    {  
      wrap.css("position","absolute");  
      //没有加这个的话，ie6使用表达式时就会发现跳动现象  
      //至于为什么要加这个，还有为什么要加nothing.txt这个，偶也不知道，希望知道的同学可以告诉我  
      $("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");  
    }  
    //将要固定的层添加到固定层里  
    $(this).appendTo(wrap);  
  });  
};

Klicken Sie hier für den vollständigen Beispielcode

Download von dieser Website.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.