Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
jQuery-панорама
 |
 |
Исходники |
Пример |
Иногда возникает необходимость показать посетителю изображение, ширина которого столь велика, что оно просто не помещается на экране.
В этом уроке мы научимся показывать в ограниченном пространстве широкие панорамные изображения с помощью специального плагина jQuery.
Создадим заготовку для обычного html-документа:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> </body> </html>
Теперь внутри секции head произведем подключение файла стилей, который прилагается к плагину, и необходимых скриптов:
<link href="css/panorama.css" rel="stylesheet" /> <script src="js/jquery-1.5.2.min.js"></script> <script src="js/jquery.panorama.js"></script>
Первый файл JavaScript - это непосредственно фреймворк jQuery, а второй - плагин panorama для работы с панорамными изображениями.
Теперь укажем, что мы хотим вставить блок JavaScript, и напишем следующий код:
<script>
$(document).ready(function(){
$("img.nature").panorama(
{
viewport_width: 600,
speed: 50000,
direction: "left",
control_display: "yes"
});
});
</script>
Весь код у нас написан внутри специальной функции ready, которая позволяет запускать выполнение Javascript-сценария только тогда, когда полностью завершилась загрузка страницы.
Внутри данной функции мы производим выборку элементов img с классом nature и применяем к ним функцию panorama.
В фигурных скобках указаны некоторые дополнительные настройки, которые мы рассмотрим ниже.
Все предварительные приготовления закончены. Теперь нам осталось только добавить саму картинку, к которой мы хотим применить плагин.
Внутри тэга body пишем:
<img src="img/1.jpg" width="4130" height="472" alt="Природа" class="nature" />
Как Вы уже могли догадаться, для работы плагина необходимо придать класс картинке. В нашем случае это класс с именем nature. Картинки именно с таким классом мы и выбирали с помощью jQuery чуть выше.
Давайте теперь рассмотрим настройки, которые нам доступны:
viewport_width - видимая ширина картинки (в пикселях); по умолчанию 500.
speed - скорость анимации (чем больше значение, тем медленнее анимация); по умолчанию 30000.
direction - направление движения (left или right); по умолчанию left.
control_display - видимость кнопок управления (auto или yes); по умолчанию auto.
start_position - начальная позиция картинки до перемещения; по умолчанию 0.
auto_start - автоматический запуск вращения (true или false); по умолчанию true.
mode_360 - режим 360° (true или false); по умолчанию true.
Обратите внимание, что при задании настроек между ними ставится запятая, а после последней настройки - нет.
По материалам www.xiper.net
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
