Effect 1:
1. First, the entire bottom floating through-bar ad is fixed at the bottom of the browser. As the browser scrolls, the bottom floating ad is always in the browser window. Here are a few key points: through column, fixed, and black.
So: First of all, we must give the overall width of the floating column advertisement 100%, and secondly, set a fixed positioning for it, fixed at the bottom of the browser, the background color is black, and the transparency is 0.7.
.footfixed{ width:100%; height:140px; /* The image size, width must be 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 picture of the floating column advertisement at the bottom can be seen to be higher than the background (background height: 140px, inner image height: 218px)
And the overall content is partially centered.
.fimg { height: 218px; /*Note that the image height here is higher than 140px*/ width: 1190px; margin: 0px auto; /*The overall content is centered*/ }However, since the height of the bottom suspended advertising content part 218px is greater than the height of the set parent element 140px, the height difference is 78px 78px
The following effect is produced, and the picture cannot be completed:
This requires the image to be moved up to 78px, and the overall positioning of the entire floating advertising content part at the bottom is required.
.fimg { position: relative; /*Parent element relative positioning*/ top:-78px; }result:
Here is a question:
The picture is not very clear because of the added transparency.
To solve this problem, use a div to set the background instead of setting the background color in .footfixed.
<div></div>
.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*/.footfixed{ width:100%; height:140px; /* Image size, width must be 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:
This makes it much clearer.
3. The effect of the close button:
First, the button is fixed to the upper right corner of the advertising image by positioning the image. The image size needs to be set, the image introduction path needs to be used to position the entire part of the floating advertising content at the bottom, and the close button is to position it absolutely.
.fimg { position: relative; /*Relative positioning of parent elements*/}.close { width: 33px; height: 33px; /* Image size*/ background: url(images/close.png) no-repeat center center; /*Image introduction path*/ position: absolute; right: 15px; top: 85px; /*Fixed to fix it on the entire bottom and suspended upper right corner of the advertising image*/}Secondly, move the mouse to the close button, and a small hand appears, and the close button rotates.
To produce animation effects, add transition
.close { transition: .5s; cursor: pointer; /*Fixed to the upper right corner of the bottom by positioning*/}.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 the Close button, the ad disappears and the effect appears on the side
#fimg-min{ width: 80px; height: 140px; /* Image size*/ position: fixed; bottom: 0px; left: 0px; /* Positioning*/ display: none; /*Hide*/ cursor: pointer; /*Little hand*/}Click the icon circled in the picture, and the advertisement at the bottom appears 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 image rotation effect in browsers below ie9 failed to achieve.
The above method of closing the advertising space by floating column at the bottom of the article is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.