検索
ホームページウェブフロントエンドhtmlチュートリアル底部悬浮通栏可以关闭广告位详解（一）

底部悬浮通栏可以关闭广告位详解（一）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 01, 2016 pm 02:32 PM

效果一：

1.首先，整个底部悬浮通栏广告是固定在浏览器的底部，随着浏览器的滚动，底部悬浮广告始终在浏览器窗口中。这里有几个关键点：通栏，固定，黑色。

所以:首先我们必须给悬浮通栏广告整体一个100%的宽度，其次给它设定固定定位，固定在浏览器底部，背景色为黑色，透明度为0.7。

<span style="color: #008080;">1</span> <span style="color: #800000;">.footfixed</span>{
<span style="color: #008080;">2</span> 　　<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">100%</span>; 
<span style="color: #008080;">3</span> 　　<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">140px</span>;     <span style="color: #008000;">/*</span><span style="color: #008000;"> 图片大小，宽度必须100% </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">4</span> 　　<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">fixed</span>;
<span style="color: #008080;">5</span> 　　<span style="color: #ff0000;">bottom</span>:<span style="color: #0000ff;">0</span>;         <span style="color: #008000;">/*</span><span style="color: #008000;">固定定位，固定在浏览器底部。</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">6</span> 　　<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> #081628</span>;
<span style="color: #008080;">7</span> 　　<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> .7</span>;    <span style="color: #008000;">/*</span><span style="color: #008000;">Chrome、Safari、Firefox、Opera </span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> <br>　　　filter</span>:<span style="color: #0000ff;">alpha(opacity=70)</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 针对 IE8 以及更早的版本 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">8</span> }

2. 底部悬浮通栏广告的图片，可以看出比背景要高（背景height:140px，内图height: 218px）

且整体内容部分居中。

<span style="color: #008080;">1</span> <span style="color: #800000;">.fimg </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 218px</span>;        <span style="color: #008000;">/*</span><span style="color: #008000;">注意此处图片高度高于140px</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 1190px</span>; 
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 0px auto</span>;    <span style="color: #008000;">/*</span><span style="color: #008000;">整体内容部分居中</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">5</span> }

然而由于底部悬浮广告内容部分高度218px大于设定的父元素的高度140px，高度相差78px

产生如下效果，图片没能完成的展现出来：

 

这需要图片上移78px，需要对整个底部悬浮广告内容部分整体做相对定位

<span style="color: #008080;">1</span> <span style="color: #800000;">.fimg </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> relative</span>;    <span style="color: #008000;">/*</span><span style="color: #008000;">父元素相对定位</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;">-78px</span>;
<span style="color: #008080;">4</span> }

结果：

这里有个问题：

图片不是很清楚，因为加了透明度。

解决这个问题，用一个div来设置背景，而不在.footfixed里设置背景色。

 1 div class="ftbj">div> 

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.ftbj</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">     height</span>:<span style="color: #0000ff;">100%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">     width</span>:<span style="color: #0000ff;">100%</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">     position</span>:<span style="color: #0000ff;"> absolute</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">     top</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">     left</span>:<span style="color: #0000ff;"> 0</span>;　　　　
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">     background</span>:<span style="color: #0000ff;">#081628</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">     opacity</span>:<span style="color: #0000ff;"> .7</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">Chrome、Safari、Firefox、Opera </span><span style="color: #008000;">*/</span><span style="color: #008080;"> <br> 9</span> <span style="color: #ff0000;">     filter</span>:<span style="color: #0000ff;"> alpha(opacity=70)</span>;}<span style="color: #008000;">/*</span><span style="color: #008000;"> 针对 IE8 以及更早的版本 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">10</span> <span style="color: #800000;">.footfixed</span>{
<span style="color: #008080;">11</span> <span style="color: #ff0000;">     width</span>:<span style="color: #0000ff;">100%</span>; 
<span style="color: #008080;">12</span> <span style="color: #ff0000;">     height</span>:<span style="color: #0000ff;">140px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 图片大小，宽度必须100% </span><span style="color: #008000;">*/</span> 
<span style="color: #008080;">13</span> <span style="color: #ff0000;">     position</span>:<span style="color: #0000ff;">fixed</span>; 
<span style="color: #008080;">14</span> <span style="color: #ff0000;">     bottom</span>:<span style="color: #0000ff;">0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">固定定位，固定在浏览器底部。</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">15</span> }

这样图片效果：

这样就清楚多了。

3.其中关闭按钮的效果：

首先按钮是由图片通过定位实现固定在整个底部悬浮广告图片右上角。需设定图片大小，图片引入路径，需要对整个底部悬浮广告内容部分整体做相对定位，关闭按钮是做绝对定位

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.fimg </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> relative</span>;    <span style="color: #008000;">/*</span><span style="color: #008000;">父元素相对定位</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 3</span> }
<span style="color: #008080;"> 4</span> <span style="color: #800000;">.close </span>{
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 33px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 33px</span>;         <span style="color: #008000;">/*</span><span style="color: #008000;"> 图片大小 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> url(images/close.png) no-repeat center center</span>;    <span style="color: #008000;">/*</span><span style="color: #008000;">图片引入路径 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> absolute</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    right</span>:<span style="color: #0000ff;"> 15px</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;"> 85px</span>;             <span style="color: #008000;">/*</span><span style="color: #008000;">通过定位实现固定固定在整个底部悬浮广告图片右上角 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">11</span> }

其次，鼠标移到关闭按钮上，有小手出现，关闭按钮旋转。

为了产生动画效果，加transition

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.close </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    transition</span>:<span style="color: #0000ff;"> .5s</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    cursor</span>:<span style="color: #0000ff;"> pointer</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">通过定位实现固定固定在整个底部悬浮广告图片右上角 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.close:hover </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;"> rotate(180deg)</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">    -ms-transform</span>:<span style="color: #0000ff;"> rotate(180deg)</span>;         <span style="color: #008000;">/*</span><span style="color: #008000;"> IE 9 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    -moz-transform</span>:<span style="color: #0000ff;"> rotate(180deg)</span>;        <span style="color: #008000;">/*</span><span style="color: #008000;"> Firefox </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    -webkit-transform</span>:<span style="color: #0000ff;"> rotate(180deg)</span>;    <span style="color: #008000;">/*</span><span style="color: #008000;"> Safari 和 Chrome </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">10</span> <span style="color: #ff0000;">    -o-transform</span>:<span style="color: #0000ff;"> rotate(180deg)</span>;        <span style="color: #008000;">/*</span><span style="color: #008000;"> Opera </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">11</span> } <span style="color: #008000;">/*</span><span style="color: #008000;">旋转 图片</span>*/




然后是点击关闭按钮，广告向下消失，侧边出现效果






<span style="color: #008080;">1</span> <span style="color: #800000;">#fimg-min</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 140px</span>;                     <span style="color: #008000;">/*</span><span style="color: #008000;"> 图片大小 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> fixed</span>; 
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    bottom</span>:<span style="color: #0000ff;"> 0px</span>; 
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;"> 0px</span>;                         <span style="color: #008000;">/*</span><span style="color: #008000;">定位</span><span style="color: #008000;">*/</span>    
<span style="color: #008080;">7</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;"> none</span>;                    <span style="color: #008000;">/*</span><span style="color: #008000;">隐藏</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">8</span> <span style="color: #ff0000;">    cursor</span>:<span style="color: #0000ff;"> pointer</span>;                <span style="color: #008000;">/*</span><span style="color: #008000;">小手 </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">9</span> }




点击图中圈出来的图标，底部广告再次出现




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




注：在ie9以下浏览器中关闭按钮图片旋转效果未能实现。


注意：本文为原创，转载请以链接形式标明本文地址 ，谢谢合作。
本文地址：http://www.cnblogs.com/wanghuih/p/5546441.html






声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
HTMLの役割：Webコンテンツの構造HTMLの役割：Webコンテンツの構造Apr 11, 2025 am	 12:12 AM
HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTMLとコード：用語を詳しく見るHTMLとコード：用語を詳しく見るApr 10, 2025 am	 09:28 AM
htmlisaspecifictypeofcodefocuseduructuringwebcontent
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールHTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am	 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm	 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am	 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？HTMLでの開始タグの例は何ですか？Apr 06, 2025 am	 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm	 01:24 PM
メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...
オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm	 01:21 PM
WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...
See all articles
ホットAIツール
Undresser.AI Undress
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
Undress AI Tool
脱衣画像を無料で
Clothoff.io
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AI Hentai Generator
AIヘンタイを無料で生成します。
もっと見る
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
3週間前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前ByDDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：Myriseのすべてのロックを解除する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
もっと見る
ホットツール
ZendStudio 13.5.1 Mac
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
AtomエディタMac版ダウンロード
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
Safe Exam Browser
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
SublimeText3 Linux 新バージョン
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
SublimeText3 中国語版
SublimeText3 中国語版
中国語版、とても使いやすい
もっと見る
ホットトピック
Gmailメールのログイン入り口はどこですか？
7456
15
CakePHP チュートリアル
1376
52
Steamのアカウント名の形式は何ですか
77
11
Win11 Activation Key Permanent
41
19
NYTの接続はヒントと回答です
14
10
もっと見る