The implementation method of the bottom suspension banner can turn off the advertisement bit _jquery

Effect One:

1. First, the entire bottom of the suspension banner ad is fixed at the bottom of the browser, with the browser scrolling, the bottom of the floating ads are always in the browser window. Here are a few key points: banner, fixed, black.

So: First we must give the suspension banner advertising the whole of a 100% width, followed by a fixed positioning, fixed at the bottom of the browser, the background color is black, transparency of 0.7.

. footfixed{
width:100%; 
height:140px;   /* Picture size, Width must 100% * *
position:fixed;
bottom:0;     /* Fixed positioning, fixed at the bottom of the browser.　　* *
background: #081628;
Opacity:. 7;  /*chrome, Safari, Firefox, Opera/ 
Filter:alpha (opacity=70)/* for IE8 and earlier versions * *

2. The bottom suspension banner advertisement picture, may see is higher than the background (background height:140px, Neto height:218px)

and the overall content section is centered.

. fimg {
   height:218px;    * Note that the picture height above 140px*/
   width:1190px; 
   margin:0px Auto;  /* The Whole Content Section Center * *
 }

However, because the bottom of the suspended advertising content is 218px higher than the set parent element height 140px, height difference 78px

The image can not be finished by showing the following effects:

This requires the image to move 78px, the entire bottom of the suspension advertising content to do relative positioning of the whole

. fimg {
   position:relative;  /* Parent Element relative positioning *
   /top:-78px;
 }

Results:

Here's a question:

The picture is not very clear because of the added transparency.

To solve this problem, set the background with a div instead of the. footfixed.

. ftbj{
  Position:absolute;
  Background: #081628;
  height:100%;
  width:100%;
  top:0;
  left:0;
  Opacity: 7;/*chrome, Safari, Firefox, Opera 
  /Filter:alpha (opacity=70);} /* for IE8 and earlier versions of
/* footfixed{
  width:100%; 
  height:140px;   /* Picture size, Width must 100% * *
  position:fixed;
  bottom:0;     /* Fixed positioning, fixed at the bottom of the browser. * *
  background: #081628;
  Opacity:. 7;    /*chrome, Safari, Firefox, Opera/     
Filter:alpha (opacity=70)/* for IE8 and earlier versions * *

In this way, the effect picture:

That's a lot clearer.

3. The effect of the Close button:

First the button is fixed by the image through the positioning of the entire bottom of the suspended advertising picture in the upper right corner. Need to set the picture size, the picture introduced the path, needs to the entire bottom suspension advertisement content part whole to do relative positioning, the Close button is makes the absolute localization

. fimg {
  position:relative;  /* Parent element relative positioning
*
/}. Close {
  width:33px;
  height:33px;     /* Picture Size * *
  background:url (images/close.png) no-repeat Center Center;  /* Picture Introduction Path * *
  Position:absolute;
  right:15px;
  top:85px;       * * Through positioning fixed fixed in the entire bottom of the suspended advertising picture in the upper right corner * *

Second, the mouse moved to the Close button, there are small hands appear, turn off the button rotation.

In order to produce animation effect, add transition

. Close {
  transition:. 5s;
  Cursor:pointer; /* Through positioning fixed fixed in the entire bottom of the suspended advertising picture in the upper right corner * *
close:hover {
  transform:rotate (180deg);
  -ms-transform:rotate (180deg);     /* IE 9 *
  /-moz-transform:rotate (180deg);    * * Firefox
  /-webkit-transform:rotate (180deg);  * Safari and Chrome *
  /-o-transform:rotate (180deg);    /* Opera///
* Rotate picture * *

Then click on the Close button, the ad disappears, side effects appear

#fimg-min{
  width:80px;
  height:140px;           /* Picture Size * *
  position:fixed; 
  bottom:0px; 
  left:0px;             /* Positioning *  
  /Display:none;          /* Hidden *
  /cursor:pointer;        * * Small hand */
}

Click on the icon circled in the picture, the bottom ads appear again

<script>
$ (document). Ready (function () {
  $ (. Close). Click (function () {
    $ ('. Footfixed '). Animate (
      {height: ' 10px ', opacity: ' 0.4 '}, ' slow ', function () {
    $ ('. Footfixed '). Hide ();
    $ (' #fimg-min '). Show ();
    });  
  $ (' #fimg-min '). Click (function () {
      $ ('. Footfixed '). Show (). CSS ({height: ' 140px ', opacity: ' 1 '});
      $ (' #fimg-min '). Hide ();
  });
</script>

Note: The Turn off button picture rotation effect in the IE9 browser below is not implemented.

Above the bottom of the suspension banner can be closed to the implementation of advertising bit is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.