Cara menutup ruang iklan dengan mengambang di bagian bawah

Efek 1:

1. Pertama, seluruh iklan floating batang terapung difiksasi di bagian bawah browser. Saat browser menggulir, iklan mengambang bawah selalu ada di jendela browser. Berikut adalah beberapa poin utama: melalui kolom, diperbaiki, dan hitam.

Jadi: Pertama -tama, kita harus memberikan lebar keseluruhan iklan kolom mengambang 100%, dan kedua, menetapkan posisi tetap untuk itu, tetap di bagian bawah browser, warna latar belakang berwarna hitam, dan transparansi adalah 0,7.

 .footFixed {width: 100%; Tinggi: 140px; / * Ukuran gambar, lebar harus 100% */ posisi: diperbaiki; Bawah: 0; /* Memperbaiki penentuan posisi, diperbaiki di bagian bawah browser. */ latar belakang: #081628; Opacity: .7; /*Chrome, safari, firefox, opera*/filter: alpha (opacity = 70);/*untuk IE8 dan versi sebelumnya*/}

2. Gambar iklan kolom mengambang di bagian bawah dapat dilihat lebih tinggi dari latar belakang (tinggi latar belakang: 140px, tinggi gambar dalam: 218px)

Dan konten keseluruhan terpusat sebagian.

 .fimg {height: 218px; /*Perhatikan bahwa tinggi gambar di sini lebih tinggi dari 140px*/ lebar: 1190px; margin: 0px auto; /*Konten keseluruhan terpusat*/}

Namun, karena ketinggian konten iklan yang ditangguhkan bagian bawah 218px lebih besar dari ketinggian elemen induk yang ditetapkan 140px, perbedaan tinggi adalah 78px 78px

Efek berikut dihasilkan, dan gambar tidak dapat diselesaikan:

Ini membutuhkan gambar untuk dipindahkan hingga 78px, dan posisi keseluruhan dari seluruh bagian konten iklan mengambang di bagian bawah diperlukan.

 .fimg {position: relatif; /*Elemen induk posisi relatif*/ atas: -78px; }

hasil:

Inilah pertanyaannya:

Gambarnya tidak terlalu jelas karena transparansi tambahan.

Untuk mengatasi masalah ini, gunakan DIV untuk mengatur latar belakang alih -alih mengatur warna latar belakang .footfixed.

 <div> </div>

 .ftbj {position: absolute; Latar Belakang:#081628; Tinggi: 100%; Lebar: 100%; TOP: 0; Kiri: 0; opacity: .7;/*chrome, safari, firefox, opera*/filter: alpha (opacity = 70);}/*untuk IE8 dan versi sebelumnya*/. Footfixed {width: 100%; Tinggi: 140px; / * Ukuran gambar, lebar harus 100% */ posisi: diperbaiki; Bawah: 0; /*Memperbaiki penentuan posisi, diperbaiki di bagian bawah browser. */ latar belakang: #081628; Opacity: .7; /*Chrome, safari, firefox, opera*/filter: alpha (opacity = 70);/*untuk IE8 dan versi sebelumnya*/}

Dengan cara ini, gambaran efeknya:

Ini membuatnya jauh lebih jelas.

3. Pengaruh tombol tutup:

Pertama, tombol ditetapkan ke sudut kanan atas gambar iklan dengan memposisikan gambar. Ukuran gambar perlu diatur, jalur pengenalan gambar perlu digunakan untuk memposisikan seluruh bagian dari konten iklan mengambang di bagian bawah, dan tombol tutup adalah untuk memposisikannya secara mutlak.

 .fimg {position: relatif; /*Posisi relatif elemen induk*/}. Tutup {lebar: 33px; Tinggi: 33px; /* Ukuran gambar*/latar belakang: URL (gambar/tutup.png) No-Repeat Center Center; /*Path Pendahuluan Gambar*/ Posisi: Absolute; Kanan: 15px; Atas: 85px; /*Diperbaiki untuk memperbaikinya di seluruh bagian bawah dan sudut kanan atas gambar iklan*/} ditangguhkan

Kedua, pindahkan mouse ke tombol tutup, dan tangan kecil muncul, dan tombol tutup berputar.

Untuk menghasilkan efek animasi, tambahkan transisi

 .close {transisi: .5s; kursor: pointer; /*Ditetapkan ke sudut kanan atas bagian bawah dengan memposisikan*/}. Tutup: Hover {transform: rotate (180deg); -MS-Transform: Rotate (180deg); / * Yaitu 9 */ -moz -transform: rotate (180deg); / * Firefox */ -webkit -transform: rotate (180deg); / * Safari dan chrome */ -o -transform: rotate (180deg); /* Opera*/}/* Rotate Picture*/

Kemudian klik tombol Tutup, iklan menghilang dan efeknya muncul di samping

 #fimg-min {width: 80px; Tinggi: 140px; /* Ukuran gambar*/ posisi: diperbaiki; Bawah: 0px; Kiri: 0px; /* Positioning*/ Display: tidak ada; /*Sembunyikan*/ Kursor: Pointer; /*Tangan kecil*/}

Klik ikon yang dilingkari di gambar, dan iklan di bagian bawah muncul lagi

 <script> $ (dokumen) .ready (function () {$ (". tutup"). klik (function () {$ ('. FootFixed'). animate ({height: '10px', opacity: '0.4'}, "slow", function () {$ ('. FootFixed'). Hide (); $ ('#fimg () {$ ('. $ ('#fimg-min'). Klik (fungsi () {$ ('

Catatan: Efek rotasi gambar tombol mematikan di browser di bawah IE9 gagal mencapai.

Metode di atas untuk menutup ruang iklan dengan mengambang kolom di bagian bawah artikel adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.