jquery-Right bottom corner suspension AD instance _jquery

Source: Internet
Author: User
Tags jquery library

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.