Эффект 1:
1. Во-первых, все дно плавающее через BAR AD зафиксировано в нижней части браузера. Когда браузер прокручивается, нижняя плавающая реклама всегда находится в окне браузера. Вот несколько ключевых моментов: через столбец, фиксированный и черный.
Итак: во -первых, мы должны дать общую ширину рекламы с плавающей колонкой на 100%, а во -вторых, установить для него фиксированное позиционирование, закрепленное в нижней части браузера, цвет фона черный, а прозрачность - 0,7.
.footfixed {ширина: 100%; Высота: 140px; / * Размер изображения, ширина должна быть на 100% */ позиция: фиксировано; Внизу: 0; /* Фиксированное позиционирование, исправлено в нижней части браузера. */ Фон: #081628; непрозрачность: .7; /*Chrome, Safari, Firefox, Opera*/Filter: Alpha (opacity = 70);/*Для IE8 и более ранних версий*/}2. Изображение рекламы с плавающей колонкой внизу можно увидеть выше, чем фон (высота фона: 140px, внутренняя высота изображения: 218px)
И общий контент частично центрирован.
.fimg {высота: 218px; /*Обратите внимание, что высота изображения здесь выше 140px*/ width: 1190px; Полевая: 0PX Auto; /*Общее содержание сосредоточено*/}Однако, поскольку высота нижнего подвесного рекламного содержимого, часть 218px больше высоты отбора родительского элемента 140px, разность высоты составляет 78px 78px
Производится следующий эффект, и изображение не может быть завершено:
Это требует перемещения изображения до 78px, и требуется общее позиционирование всей плавающей рекламной части внизу.
.fimg {позиция: относительно; /*Относительное позиционирование родительского элемента*/ top: -78px; }результат:
Вот вопрос:
Картина не очень ясна из -за добавленной прозрачности.
Чтобы решить эту проблему, используйте Div, чтобы установить фон вместо того, чтобы установить цвет фона в .footfixed.
<div> </div>
.ftbj {позиция: абсолют; Фон:#081628; высота: 100%; Ширина: 100%; Верх: 0; слева: 0; непрозрачность: .7;/*Chrome, Safari, Firefox, Opera*/Filter: Alpha (непрозрачность = 70);}/*для IE8 и более ранних версий*/. FootFixed {ширина: 100%; Высота: 140px; / * Размер изображения, ширина должна быть 100% */ позиция: фиксированная; Внизу: 0; /*Фиксированное позиционирование, исправлено в нижней части браузера. */ Фон: #081628; непрозрачность: .7; /*Chrome, Safari, Firefox, Opera*/Filter: Alpha (opacity = 70);/*Для IE8 и более ранних версий*/}Таким образом, изображение эффекта:
Это делает это намного яснее.
3. Эффект кнопки закрытия:
Во -первых, кнопка прикреплена к верхнему правому углу рекламного изображения, позиционируя изображение. Размер изображения должен быть установлен, путь введения изображения должен быть использован для размещения всей части плавающего рекламного содержимого внизу, а кнопка закрытия - это абсолютно.
.fimg {позиция: относительно; /*Относительное позиционирование родительских элементов*/}. Close {ширина: 33px; Высота: 33px; /* Размер изображения*/фон: url (Images/close.png) Центр без повторного замены; /*Путь введения изображения*/ позиция: абсолют; Справа: 15px; Верх: 85px; /*Исправлено, чтобы исправить его на всем дне и подвешенный верхний правый угол рекламного изображения*/}Во -вторых, переместите мышь к кнопке закрытия, и появляется небольшая рука, и кнопка закрытия вращается.
Чтобы создать анимационные эффекты, добавьте переход
.close {переход: .5s; курсор: указатель; /*Исправлено в верхнем правом углу дна путем позиционирования*/}. Закрыть: Hover {Transform: rotate (180Deg); -ms-трансформация: вращение (180deg); / * Т.е. 9 */ -moz -transform: rotate (180deg); / * Firefox */ -Webkit -Transform: rotate (180Deg); / * Safari и chrome */ -o -transform: utate (180deg); /* Opera*/}/* Поверните изображение*/Затем нажмите кнопку «Закрыть», объявление исчезает, и эффект появляется на стороне
#fimg-min {width: 80px; Высота: 140px; /* Размер изображения*/ позиция: исправлена; Внизу: 0px; слева: 0px; /* Позиционирование*/ отображение: нет; /*Скрыть*/ cursor: pointer; /*Маленькая рука*/}Нажмите на значок, обведенный на картинке, и реклама внизу снова появляется
<script> $ (document) .ready (function () {$ (". Close"). Click (function () {$ ('.. FootFixed'). Animate ({Height: '10px', непрозрачность: '0.4'}, "Slow", function () {$ ('. $ ('#fimg-min'). Click (function () {$ ('ПРИМЕЧАНИЕ. Эффект вращения кнопки «Выключение кнопки» в браузерах ниже IE9 не удалось достичь.
Приведенный выше метод закрытия рекламного пространства с помощью плавающего столбца в нижней части статьи - все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.