Задавайте вопросы

Задавайте вопросы и получайте ответы от нашего сообщества

Отвечайте

Отвечайте на вопросы и станьте экспертом по своей теме

Свяжитесь с администрацией

Наши специалисты готовы ответить на ваши вопросы

Другое Красивый рекламный щит при помощи JQuery и CSS

Информация о теме

О теме Здравствуйте, вы читаете тему Красивый рекламный щит при помощи JQuery и CSS созданную в в разделе JavaScript пользователем Альваро. Эта тема была просмотрена 1 100 раз(а), получила 0 комментариев и 1 очки реакции...
Название категории JavaScript
Название темы Красивый рекламный щит при помощи JQuery и CSS
Автор темы Альваро
Дата начала
Ответы
Просмотры
Количество реакций
Последнее сообщение Альваро

Альваро

Пользователь
Регистрация
26.10.2015
Сообщения
76
Реакции
34
Баллы
25
Лучшие ответы
0
У нас будет довольно много разметки для фрагментов изображения, для каждого рекламного изображения будет использоваться 22 фрагмента:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Для этих изображений были созданы 22 фрагмента, каждый по 35 пикселей в ширину, из изображения шириной 770 пикселей и высотой 340 пикселей. Можно подумать, что это — много работы и что можно было взять целое изображение и создать блоки, действующие как фрагменты с правильно выбранным положением фонового изображения. Но тогда мы бы не смогли создать такой эффект поворачивающегося фрагмента, по крайней мере не с помощью JavaScript, который мы создали для этого урока.
У рекламного щита будет блок с абсолютным позиционированием с изображением рекламного щита. Так как у изображения есть прозрачные области, мы хотим наложить его на блок рекламы.


CSS:

Стили для рамки рекламного щита будут такими:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Чтобы элемент находился в центре страницы, мы задаем значение левого параметра равным 50% и значение левого внешнего отступа равным отрицательному значению половины элемента.
Контейнер для этих рекламных изображений будет иметь такой же стиль, как и рекламный шит, кроме фонового изображения. Мы так делаем, так как нам нужно, чтобы содержащиеся элементы находились там же, где и рекламный щит. Мы не хотим размещать рекламные изображения внутри рекламного щита, так как рекламный щит должен был поверх них. Так что мы создаем другой элемент с таким же расположением:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Фрагменты рекламного изображения будут шириной 35 пикселей. Фрагменты второго рекламного изображения будут той же ширины, но изначально мы зададим им значение ширины равное 0. Нам так же нужно задать значение левого отступа вторым фрагментам равное 18 пикселям, так как мы хотим создать эффект поворота. Мы расскажем об этом значении подробнее после того, как мы определим стили для фрагментов.
Расположение должно быть установлено для каждого фрагмента по отдельности:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Располагая элементы на один пиксель левее их реальной ширины, мы создаем небольшой промежуток между ними. Теперь значение левого внешнего отступа равно 18 пикселям, так как это половина ширины фрагмента плюс его промежуток. Мы задаем это значение, так как мы хотим, чтобы фрагменты появлялись или исчезали от их центра, а не от краев. Если мы просто назначим значение ширины фрагмента равным 0 пикселей, изображение не будет выглядеть поворачивающимся.
И это все, что касается CSS. Для дополнительных необычных фоновых изображений можете посмотреть скачиваемую версию по ссылке внизу.
Давайте создадим эффект поворота с помощью jQuery.


Javascript:

Теперь мы создадим функцию для поворота фрагментов. Эта функция заставит фрагменты первого рекламного изображения исчезать, устанавливая значение их ширины равным 0 пикселей. Чтобы получить эффект поворота, мы добавим левый внешний отступ 18 пикселей.
Пока фрагменты первого рекламного изображения исчезают, мы заставим другие фрагменты появляться, удаляя левый внешний отступ, равный 18 пикселям, который мы изначально задали в CSS, и задавая им значение ширины, равное 35 пикселям. Мы вызовем функцию поворота таким образом:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Целиком вызываемый нами скрипт будет выглядеть так:
Код:
Пожалуйста, Вход или Регистрация для просмотра содержания кодов!
Таким образом, функция поворота прячет текущий элемент, который был вызван ранее, и после этого определяет, с каким элементом она сейчас работает, так что следующий вызов функции будет работать с фрагментами другого рекламного изображения.
Два значения временных интервалов, которые используются в функции поворота для задания скорости поворота (speed – скорость) и интервала между сменами рекламных изображений (timeout – задержка), задаются в миллисекундах.


Пожалуйста, Вход или Регистрация для просмотра содержимого URL-адресов!
 
Последнее редактирование:
Верх Низ