You can close the ad spaces in the floating bar at the bottom (1 ).

You can close the ad spaces in the floating bar at the bottom (1 ).

Effect 1:

1. First, the entire Floating Bar advertisement is fixed at the bottom of the browser. As the browser scrolls, the floating ad at the bottom is always in the browser window. Here are several key points: the link bar, fixed, black.

Therefore: first, we must set a 100% width for the overall Floating Bar advertisement, and then set a fixed positioning for it, fixed at the bottom of the browser, the background color is black, and the transparency is 0.7.

1. footfixed {2 width: 100%; 3 height: 140px;/* image size, width must be 100% */4 position: fixed; 5 bottom: 0;/* fixed positioning, fixed at the bottom of the browser. */6 background: #081628; 7 opacity:. 7;/* Chrome, Safari, Firefox, and Opera */
Filter: alpha (opacity = 70);/* For IE8 and earlier versions */8}

2. The image of the Floating Bar ad at the bottom is higher than that of the background (background height: 140px, inner figure height: 218px)

The entire content is centered.

1. fimg {2 height: 218px;/* Note that the image height is higher than 140px */3 width: 1190px; 4 margin: 0px auto;/* center the entire content */5}

However, because the height of part of the floating ad content at the bottom is 218px greater than the height of the set parent element 140px, the height difference is 78px.

The image cannot be displayed as follows:

 

This requires the image to move up to 78px, and the entire part of the floating ad content at the bottom needs to be relatively positioned

1. fimg {2 position: relative;/* parent element relative positioning */3 top:-78px; 4}

Result:

Here is a problem:

The image is not very clear, because it adds transparency.

To solve this problem, use a div to set the background, instead of setting the background color in. footfixed.

1 <div class = "ftbj"> </div>

1. ftbj {2 height: 100%; 3 width: 100%; 4 position: absolute; 5 top: 0; 6 left: 0; 7 background: #081628; 8 opacity :. 7;/* Chrome, Safari, Firefox, and Opera */
9 filter: alpha (opacity = 70);}/* For IE8 and earlier versions */10. footfixed {11 width: 100%; 12 height: 140px;/* image size, width must be 100% */13 position: fixed; 14 bottom: 0;/* fixed positioning, fixed at the bottom of the browser. */15}

The image effect is as follows:

This makes it much clearer.

3. The effect of the close button is as follows:

First, the buttons are fixed in the upper right corner of the floating ad image at the bottom by positioning the image. You need to set the image size and image import path. You need to locate the entire floating ad content at the bottom, and close the button for absolute positioning.

1. fimg {2 position: relative;/* parent element relative positioning */3} 4. close {5 width: 33px; 6 height: 33px;/* image size */7 background: url (images/close.png) no-repeat center; /* image import path */8 position: absolute; 9 right: 15px; 10 top: 85px;/* fixed to the top right corner of the floating ad image at the bottom by positioning */11}

Second, move the mouse over the close button, a small hand appears, and the close button is rotated.

Add transition to produce the animation effect.

1. close {2 transition :. 5 s; 3 cursor: pointer;/* fixed to the top right corner of the floating ad image at the bottom through positioning */4} 5. close: hover {6 transform: rotate (180deg); 7-ms-transform: rotate (180deg);/* IE 9 */8-moz-transform: rotate (180deg ); /* Firefox */9-webkit-transform: rotate (180deg);/* Safari and Chrome */10-o-transform: rotate (180deg ); /* Opera */11}/* rotating image */

Then, click the close button. The advertisement disappears down and the side displays the effect.

1 # fimg-min {2 width: 80px; 3 height: 140px;/* image size */4 position: fixed; 5 bottom: 0px; 6 left: 0px; /* locate */7 display: none;/* hide */8 cursor: pointer;/* little hands */9}

Click the icon circled in the figure, and the advertisement at the bottom appears again.

 1 <script> 2 $(document).ready(function(){ 3     $(".close").click(function () { 4         $('.footfixed').animate( 5             {height: '10px', opacity: '0.4'}, "slow", function () { 6         $('.footfixed').hide(); 7         $('#fimg-min').show(); 8         }); 9     });    10     $('#fimg-min').click(function(){11             $('.footfixed').show().css({height:'140px',opacity:'1'});12             $('#fimg-min').hide();13     });    14 });15 </script>16          

Note: The Disable button image rotation effect cannot be achieved in IE 9 or earlier browsers.

Note: This article is original. Please mark the address of this article as a link. Thank you for your cooperation.
Address: http://www.cnblogs.com/wanghuih/p/5546441.html