jquery-Right bottom corner suspension AD instance _jquery

The lower right corner of the advertising is a common way to display the Web ads, but also to the user browsing is suspected of interference but for the site revenue is very popular with webmaster. Today I'm going to share an example of using jquery to implement an ad in the lower right corner of a Web page. Its advantage is that it can rise slowly from the lower right corner, show a certain time automatically disappear, and can be changed to the Web Site Message prompt window.

Html

First prepare the advertising material, and in the body to establish a user suspension of the advertising subject Div#pop, set to not show, in the upper title bar of the advertisement has a close button, click Close, then close the hidden suspension ads.

<div id= "Pop" style= "Display:none;" > 
  <div id= "Pophead" > 
  <a id= "Popclose" title= "off" > off </a> 
   
 

Css
Use CSS to slightly beautify #pop. Note that we actually use position:fixed;right:0;bottom:0, but we have already fixed the ad position in the lower right corner, but we have to take care of those IE6 users, IE6 does not support fixed, This problem can be solved by using the jquery plugin to solve the IE6 compatibility line problem.

#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;} 

Jquery

The suspension ad effect relies on jquery, so don't forget to load the jquery library file when the page is loaded.

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 ();; 
 } else{//call Jquery.fixed.js, resolve IE6 cannot use fixed 
  $ (' #pop '). Show (); 
   JQuery (function ($j) { 
    $j (' #pop '). positionfixed ()}} 
 }, 
 closediv:function () { 
  $ (" #popClose "). Click (function () { 
   $ (' #pop '). Hide (); 
   } 
 

In the case of IE6, we call the jquery.fixed this plugin, of course, we have put the plugin in the download package in the ads.js, please download the compression package. The only way to invoke this code effect is to write:

var popad=new Pop (); 

In this way, we can show a hover advertising effect in the lower right corner, we can continue to expand, to pop () passed some parameters, can be extended to the Web site message box and other effects, this left interested students can continue to refer to this site.