Jquery floating fixed layer plugin usage example _ jquery

This article mainly introduces the usage of jquery floating fixed layer plug-in at any position, and analyzes the usage tips of jQuery floating layer plug-ins, for more information about jquery floating fixed layer plug-ins, see the example in this article. Share it with you for your reference. The specific analysis is as follows:

Note: the specified layer can be moved to any position on the webpage. when the scroll bar is rolled, it remains unchanged at the current position without flashing.

Modification: modified the plug-in to implement a fixed floating layer, using a large fixed layer to locate
Modified on: fixed the issue that IE6 cannot be fixed on top.

Modification: when the absolute position of the custom layer is added and the top value is null
This method is stolen from the new Tianya page.
After multiple tests, there are basically no bugs ~

Call:

1. no parameter call: The default value is floating in the lower right corner.

$ ("# Id"). floatp ();

2 built-in fixed position floating

// $ ("# Id") in the lower right corner "). floatp ("rightbottom"); // $ ("# id") in the lower left corner "). floatp ("leftbottom"); // $ ("# id") in the lower right corner "). floatp ("rightbottom"); // upper left corner $ ("# id "). floatp ("lefttop"); // upper right corner $ ("# id "). floatp ("righttop"); // center $ ("# id "). floatp ("middle ");

In addition, four new fixed location methods are added.

Middletop, middlebottom, leftmiddle, and rightmiddle

3. Custom position floating

$ ("# Id"). floatp ({left: "10px", top: "10px "});
Set the floating layer to the left 10 pixels and top 10 pixels.

JQuery. fn. floatp = function (location) {// Determine the browser version 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 returns wwidth, returns wheight; // The height and width of the window // retrieves the height and width of the window if (self. innerHeight) {bytes wwidth = self. innerWidth; required wheight = self. innerHeight;} else if (document.documentelement&document.doc umentElement. clientHeight) {your wwidth?document.doc umentElement. clientWidth; optional wheight1_document.doc umentElement. clientHeight;} else if (document. body) {required wwidth = document. body. clientWidth; required wheight = document. body. clientHeight;} return this. each (function () {var loc; // The absolute location of the layer var wrap =$ ("
"); 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"): // center top loc = {left: drawing wwidth/2-$ (This ). width ()/2 + "px", top: "0px"}; top = 0; break; case ("middlebottom"): // Center low loc = {left: required wwidth/2-$ (this ). width ()/2 + "px", bottom: "0px"}; break; case ("leftmiddle"): // center left loc = {left: "0px ", top: always wheight/2-$ (this ). height ()/2 + "px"}; top = running wheight/2-$ (this ). height ()/2; break; case ("rightmiddle"): // Center loc on the right = {right: "0px", top: running wheight/2-$ (this ). height ()/2 + "px"}; top = running wheight/2-$ (this ). height ()/2; break; case ("middle"): // center var l = 0; // center left var t = 0; // l = running wwidth/2-$ (this ). width ()/2; t = optional wheight/2-$ (this ). height ()/2; top = t; loc = {left: l + "px", top: t + "px"}; break; default: // The default value is location = "rightbottom"; loc = {right: "0px", bottom: "0px"}; break ;}} else {loc = location; alert (loc. bottom); var str = loc. top; // modification: if (typeof (str) when top is null )! = 'Undefined') {str = str. replace ("px", ""); top = str ;}/ * fied ie6 css hack */if (isIE6) {if (top> = 0) {wrap = $ ("
");} Else {wrap = $ ("
") ;}}$ (" Body "). append (wrap); wrap.css(locate.css ({position: "fixed", z_index: "999"}); if (isIE6) {wrap.css ("position", "absolute "); // if this is not added, when ie6 uses an expression, it will find a beating phenomenon. // when it comes to the seek, it will also add nothing.txt to the seek, and even do not know, anyone who wants to know can tell me $ ("body" ).css ("background-attachment", "fixed" ).css ("background-image", "url(n1othing.txt )");} // add the fixed layer to the fixed layer $ (this ). appendTo (wrap );});};

Click here to download the complete instance code.

I hope this article will help you with jQuery programming.