Jquery Plugin-floating Advertisement

A few days ago, I encountered a function that showed floating advertisements on the page. There were a lot of js code, so I decided to copy the code on the Internet, after searching for half a day, I did not find the right one.

Although these codes can be used to display the floating layer at a fixed position on the screen and scroll as the window scrolls, the display is generally large and the page content can only be displayed in the center of the screen, when the floating ad is on the left or right, you can only set the distance from the window border, so it is far away from the content area. I want the floating layer to be positioned on the edge of the content area.

I did not find a suitable one after two or three hours. I spent only half an hour writing it myself.

The Code is as follows:

// Set floating block
// Element: the id of the floating window.
// Position: Baseline position. Options: left, right, or center. Options: left or right, or center. The default value is left.
// Distance: distance from the reference location. It can be a positive or negative value.
// Top: the distance from the top of the window
JQuery. fn. FloatBox = function (element, position, distance, top ){
If (typeof (element) = "string") element = $ (element );
If (element. size () <1) return;
// Initialize some values
Position = position! = Null & position! = ""? Position: "left ";
Distance = distance! = Null? Distance: $ (window). width ()/2;
Top = top! = Null? Top: 0;
// Calculate the position of the floating form on the left side (coordinates)
Var left = 0;
If (position = "left") left = distance;
If (position = "right") left = $ (window). width ()-distance-element.width ();
If (position = "center") left = distance> 0? $ (Window). width ()/2 + distance: $ (window). width ()/2 + distance-element.width ();
// Set the properties of the floating window, mainly the coordinates
Element.css ({position: "absolute ",
"Z-index": 20001,
Left: left,
Top: top });
$ (Window). scroll (function (){
Var offsetTop = $ (window). scrollTop ();
Element. animate ({top: offsetTop + top}, {duration: 500, queue: false });
})
}

The above code can implement floating block to the left, right, or center. When the floating block is in the middle, you can set the distance deviation. For example, the content area of the webpage is 1000px, when-500 is set, the floating block is displayed on the left side of the content area.

The following code is used:

$ (Document). ready (function (){
$ (). FloatBox ("# Ols", "center",-520,140 );
$ (). FloatBox ("# qrcode", "center", 520,140 );
});

Two floating blocks are set, one on the left side of the content and the other on the right side of the content;

 

 

I tested it. IE6, Firefox, and Chrome are normal, and other browsers are not tested.

I personally think it is quite convenient to use, but there are also some shortcomings. For example, I only consider the left and right positions, but not the bottom left and right corners. Fortunately, the Code is not complex. If you are interested, you can complete it.