Floating ad instance in the lower right corner of jQuery and jquery floating ad instance

Floating ad instance in the lower right corner of jQuery and jquery floating ad instance

Floating advertisements in the lower right corner are a common way to display web advertisements, which may affect user browsing, but are very popular with webmasters for website benefits. Today, I will share with you an example of using jQuery to implement advertisement in the lower right corner of a webpage. Its advantage is that it can rise slowly from the lower right corner, display automatically disappears for a certain period of time, and can be changed to the website message Prompt window.

HTML

First, prepare the ad Materials, and create a user-defined ad subject DIV # pop in the body, and set it to not display. There is a close button in the upper title bar of the AD. When you click Close, disable the hidden floating ad.

<Div id = "pop" style = "display: none; "> <div id =" popHead "> <a id =" popClose "title =" close "> close </a> 
CSS
Use CSS to slightly beautify # pop. Note that we actually use position: fixed; right: 0; bottom: 0; in fact, we have fixed the advertisement position in the lower right corner. However, IE6 does not support fixed, to solve this problem, we can use the jquery plug-in to solve the problem of ie6 compatibility.

#pop{background:#fff;width:300px; height:282px;font-size:12px;position:fixed;right:0;bottom:0;} #popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:12px; padding-left:10px;} #popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;} #popHead #popClose{position:absolute;right:10px;top:1px;} #popHead a#popClose:hover{color:#f00;cursor:pointer;} 
JQuery

This floating ad effect depends on jQuery. Therefore, when loading a page, do not forget to load the jQuery library file first.

Function Pop () {this. apearTime = 1000; this. hideTime = 500; this. delay = 10000; // display this. showDiv (); // close this. closeDiv ();} Pop. prototype = {showDiv: function (time) {if (! ($. Browser. msie & ($. browser. version = "6.0 ")&&! $. Support. style) {$ ('# pop '). slideDown (this. apearTime ). delay (this. delay ). fadeOut (400);} else {// call jquery. fixed. js to solve ie6 failure to use fixed $ ('# Pop '). show (); jQuery (function ($ j) {$ j ('# Pop '). positionFixed ()}) }}, closeDiv: function () {$ ("# popClose "). click (function () {$ ('# pop '). hide ();});}}
In ie6, we called the jquery. fixed plug-in. Of course, we have put this plug-in the ads. js package. Please download the compressed package. To call this code, you only need to write it like this:

var popad=new Pop(); 
In this way, we can display the effect of a floating advertisement in the lower right corner. We can also continue to extend it by passing some parameters to Pop (), which can be extended to the website message prompt box and other effects, this will be left for interested users to continue to refer to this site.