|
|
|
|
Эффект приближения и отдаления изображений Автор: Андрей Краснокутский Дата: 2011-10-16 Приближение и отдаление картинок с помощью jQuery.Продолжаем разбираться с библиотекой jQuery и плагином jquery.cross-slide.js. В одном из прошлых уроков с помощью этого плагина мы создавали эффект плавно сменяющихся картинок. Но с помощью этого плагина можно реализовать и другие эффекты, например: эффект приближения и отдаления изображений. Вот как это выглядит:
Эффект приближения и отдаления изображений. Если изображения не видно, обновите страницу
Как всегда скачиваем архив с заготовками и давайте разбираться как это сделать практически. Распакуйте архив с библиотекой jquery-1.6.2.min.js, плагином jquery.cross-slide.js и заготовками картинок. Положите файлы: библиотеки и плагина в корневую папку или в любую другую, но не забудьте правильно прописать путь до этих файлов. Давайте будем считать, что эти файлы мы положили в корень сайта. Между тегами <head> и </head> прописываем код код Листинга 1: Листинг 1.
Конечно же Вам понадобятся и сами изображения, которые будут сменять друг друга с эффектом увеличения и уменьшения. Для демонстрации этого слайд-шоу я использовал фотографии своего родного города Смоленска, в котором я живу. В данном случае я использую 6 картинки: 1.jpg - 6.jpg, которые лежат в папке images. Размеры моих картинок 600х450 пикселей. Количество картинок конечно же можно увеличить или уменьшить. Теперь разбираем, что мы написали в коде Листинга 1: Три строчки кода: <script type="text/javascript" src="jquery-1.6.2.min.js"></script> это стандартное подключение Библиотеки jquery и плагина jquery.cross-slide.js к web-странице. Дальше: $(function() { мы "говорим браузеру", что нужно вытащить из библиотеки и запустить функцию cross-slide, привязав к ней id класс test2. Следующие блоки, в данном случае их 6 (по количеству изображений), подробно разберемся с одним из блоков, остальные просто повторяются, разница лишь в название файлов картинок. Берем первый блок (для первой картинки): src: 'images/1.jpg', Первая строка: src: 'images/1.jpg',- указываем путь до изображения. Вторая строка: href: 'http://www.luksweb.ru',- ссылка по которой перейдет посетитель сайта, если кликнет по этой картинке. Строки 3-я и 4-я from: '100% 80% 1x', , to: '100% 0% 1.7x',- здесь указываем параметры увеличения или уменьшения картинок, можете поэксперементировать с этими параметрами. Пятая строка: time: 3- здесь указывается время смены картинок в секундах, в данном случае - 3 секунды. Все остальные блоки похожие, описывают каждую из шести картинок, как Вы уже поняли настраивать их можно индивидуально. И последний блок в коде Листинга 1: <style type="text/css"> Этот блок описывает параметры вывода на web-странице окна, в котором отображаются все изображения, как видите это обычные каскадные таблицы стилей - CSS.
В том месте web-страницы, где Вы хотите вывести окно со сменяющимися картинками, прописаваете код Листинга 2: Листинг 2.
Вот собственно говоря и все, теперь закачивайте все нужные файлы на свой хостинг и наслаждайтесь полученным эффектом. Удачи Вам.
Читайте так же другие наши материалы. Какой формат предпочтительнее текстовый или видео? Локальный Сервер (Денвер) у Вас дома. Практическое руководство. Фоновые изображения для Вашего сайта в стиле Зеленая ткань. Как создать электронные документы в PDF формате. Обучающий Видео Курс по созданию сайтов.
Просмотров: 23226 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Николай Гижицкий Отличная реализация! Значительно круче чем предыдущий урок! Спасибо!!! Комментарии добавил(а): Гульшат Спасибо, очень полезный урок! Благодарю Комментарии добавил(а): Наргиз Спасибо огромное, просто клева! Комментарии добавил(а): Игорь Вобще-то этот эффект называется Ken Burns effect, а плагин CrossSlide Комментарии добавил(а): Вячеслав На Ucoz чо то не пашет Комментарии добавил(а): Texnik.pro у меня не получилось на сайте у себя сделать Комментарии добавил(а): Иван Классно! Огромное спасибо, всё очень грамотно описано! Комментарии добавил(а): Наталья Здравствуйте! Большое спасибо, всё получилось! А можно ли сверху наложить надпись? Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |