効果1：
1.最初に、ボトムフローティングスルーバーの広告全体がブラウザの下部に固定されています。ブラウザがスクロールすると、底部のフローティング広告は常にブラウザウィンドウにあります。ここにいくつかの重要なポイントがあります：列、固定、および黒。
したがって、まず第一に、フローティング列の広告の全体幅を100％にする必要があり、次に、ブラウザの下部に固定された固定位置決めを設定する必要があります。背景色は黒で、透明度は0.7です。
.footfixed {width：100％;高さ：140px; / *画像サイズ、幅は100％でなければなりません */位置：固定。下：0; /*ブラウザの下部に固定された位置付けを修正しました。 */背景：＃081628;不透明：.7; /*Chrome、Safari、Firefox、Opera*/Filter：Alpha（Opacity = 70）;/*IE8および以前のバージョン*/}2。下部にあるフローティング列の広告の写真は、背景よりも高いことがわかります（背景高さ：140px、内側の画像の高さ：218px）
そして、全体的なコンテンツは部分的に中心です。
.fimg {height：218px; /*ここの画像の高さは140pxを超えていることに注意してください*/幅：1190px。マージン：0px auto; /*全体のコンテンツが中心になっています*/}ただし、底部の吊り下げ式広告コンテンツの高さパート218pxは、設定された親要素140pxの高さよりも大きいため、高さの違いは78px 78pxです
次の効果が生成され、写真を完成させることはできません。
これには、画像を78pxまで移動する必要があり、下部のフローティング広告コンテンツパーツ全体の全体的な位置は必要です。
.fimg {position：relative; /*親要素相対位置決め*/ TOP：-78px; }結果：
ここに質問があります：
透明性が追加されているため、写真はあまり明確ではありません。
この問題を解決するには、divを使用して、.footfixedで背景色を設定する代わりに背景を設定します。
<div> </div>
.ftbj {position：absolute;背景：＃081628;高さ：100％;幅：100％;上：0;左：0;不透明：.7;/*Chrome、Safari、Firefox、Opera*/Filter：Alpha（Opacity = 70）;}/*IE8および以前のバージョンの場合*/。footfixed {width：100％;高さ：140px; / *画像サイズ、幅は100％でなければなりません */位置：固定。下：0; /*ブラウザの下部に固定された位置付けを修正しました。 */背景：＃081628;不透明：.7; /*Chrome、Safari、Firefox、Opera*/Filter：Alpha（Opacity = 70）;/*IE8および以前のバージョン*/}このようにして、効果画像：
これにより、はるかに明確になります。
3。閉じるボタンの効果：
まず、ボタンは画像を配置することにより、広告画像の右上隅に固定されています。画像サイズを設定する必要があります。画像導入パスを使用して、フローティング広告コンテンツの部分全体を下部に配置する必要があります。
.fimg {position：relative; /*親要素の相対的なポジショニング*/}。close {width：33px;高さ：33px; /*画像サイズ*/背景：url（images/close.png）繰り返しセンターセンター。 /*画像導入パス*/位置：絶対;右：15px;上：85px; /*底全体に修正し、広告画像の右上隅を吊り下げました*/}第二に、マウスを近くのボタンに移動すると、小さな手が現れ、近くのボタンが回転します。
アニメーション効果を生成するには、トランジションを追加します
.close {transition：.5s;カーソル：ポインター; /*配置することにより、下部の右上隅に固定*/}。 -ms-transform：Rotate（180deg）; / * ie 9 */ -moz -transform：rotate（180deg）; / * firefox */ -webkit -transform：Rotate（180deg）; / * safari and chrome */ -o -transform：Rotate（180deg）; /* opera*/}/*画像を回転*/次に、閉じるボタンをクリックすると、広告が消え、効果が側面に表示されます
＃fimg-min {width：80px;高さ：140px; /*画像サイズ*/位置：修正。下：0px;左：0px; /*ポジショニング*/表示：なし; /*非表示*/カーソル：ポインター; /*小さな手*/}写真に囲まれたアイコンをクリックすると、下部の広告が再び表示されます
<script> $（document）.ready（function（）{$（ "。close"）。クリック（function（）{$（ '。フットフィックス'）。 $（ '＃fimg-min'）。click（function（）{$（ '。footfixed'）。show（）注：IE9以下のブラウザのターンオフボタン画像回転効果は達成できませんでした。
記事の下部にあるフローティング列で広告スペースを閉じる上記の方法は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。