Эффект приближения и отдаления изображений
Автор: Андрей Краснокутский
Дата: 2011-10-16 Приближение и отдаление картинок с помощью jQuery.
Продолжаем разбираться с библиотекой jQuery и плагином jquery.cross-slide.js. В одном из прошлых уроков с помощью этого плагина мы создавали эффект плавно сменяющихся картинок. Но с помощью этого плагина можно реализовать и другие эффекты, например: эффект приближения и отдаления изображений.
Вот как это выглядит:
Эффект приближения и отдаления изображений.
Если изображения не видно, обновите страницу
Как всегда скачиваем архив с заготовками и давайте разбираться как это сделать практически. Распакуйте архив с библиотекой jquery-1.6.2.min.js, плагином jquery.cross-slide.js и заготовками картинок. Положите файлы: библиотеки и плагина в корневую папку или в любую другую, но не забудьте правильно прописать путь до этих файлов. Давайте будем считать, что эти файлы мы положили в корень сайта.
Между тегами <head> и </head> прописываем код код Листинга 1:
Листинг 1.
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.cross-slide.js"></script>
<script type="text/javascript">
$(function() {
$('#test2').crossSlide({
fade: 1
}, [
{
src: 'images/1.jpg',
href: 'http://www.luksweb.ru',
from: '100% 80% 1x',
to: '100% 0% 1.7x',
time: 3
}, {
src: 'images/2.jpg',
href: 'http://www.luksweb.ru',
from: 'top left',
to: 'bottom right 1.5x',
time: 2
}, {
src: 'images/3.jpg',
href: 'http://www.luksweb.ru',
from: '100% 80% 1.5x',
to: '80% 0% 1.1x',
time: 2
}, {
src: 'images/4.jpg',
href: 'http://www.luksweb.ru',
from: '100% 50%',
to: '30% 50% 1.5x',
time: 2
}, {
src: 'images/5.jpg',
href: 'http://www.luksweb.ru',
from: 'top left',
to: 'bottom right 1.5x',
time: 2
},{
src: 'images/6.jpg',
href: 'http://www.luksweb.ru',
from: '100% 80% 1.5x',
to: '80% 0% 1.1x',
time: 2
}
]);
});
</script>
<style type="text/css">
#test2 {
margin: 1em auto;
border: 2px solid #6699CC;
width: 550px;
height: 344px;
}
</style> |
Конечно же Вам понадобятся и сами изображения, которые будут сменять друг друга с эффектом увеличения и уменьшения. Для демонстрации этого слайд-шоу я использовал фотографии своего родного города Смоленска, в котором я живу.
В данном случае я использую 6 картинки: 1.jpg - 6.jpg, которые лежат в папке images. Размеры моих картинок 600х450 пикселей. Количество картинок конечно же можно увеличить или уменьшить.
Теперь разбираем, что мы написали в коде Листинга 1:
Три строчки кода:
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.cross-slide.js"></script>
<script type="text/javascript">
это стандартное подключение Библиотеки jquery и плагина jquery.cross-slide.js к web-странице.
Дальше:
$(function() {
$('#test2').crossSlide({
мы "говорим браузеру", что нужно вытащить из библиотеки и запустить функцию cross-slide, привязав к ней id класс test2.
Следующие блоки, в данном случае их 6 (по количеству изображений), подробно разберемся с одним из блоков, остальные просто повторяются, разница лишь в название файлов картинок.
Берем первый блок (для первой картинки):
src: 'images/1.jpg',
href: 'http://www.luksweb.ru',
from: '100% 80% 1x',
to: '100% 0% 1.7x',
time: 3
Первая строка: 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">
#test2 {
margin: 1em auto;
border: 2px solid #6699CC;
width: 550px;
height: 344px;
}
</style>
Этот блок описывает параметры вывода на web-странице окна, в котором отображаются все изображения, как видите это обычные каскадные таблицы стилей - CSS.
В том месте web-страницы, где Вы хотите вывести окно со сменяющимися картинками, прописаваете код Листинга 2:
Листинг 2.
<div align="center" id="test2">Если изображения не видно, обновите страницу</div> |
Вот собственно говоря и все, теперь закачивайте все нужные файлы на свой хостинг и наслаждайтесь полученным эффектом.
Удачи Вам.
Читайте так же другие наши материалы.
Какой формат предпочтительнее текстовый или видео?
Локальный Сервер (Денвер) у Вас дома. Практическое руководство.
Фоновые изображения для Вашего сайта в стиле Зеленая ткань.
Как создать электронные документы в PDF формате.
Обучающий Видео Курс по созданию сайтов.
Просмотров: 21222
Отличная реализация!
Значительно круче чем предыдущий урок!
Спасибо!!!
Спасибо, очень полезный урок! Благодарю
Спасибо огромное, просто клева!
Вобще-то этот эффект называется Ken Burns effect, а плагин CrossSlide
у меня не получилось на сайте у себя сделать
Классно! Огромное спасибо, всё очень грамотно описано!
Здравствуйте!
Большое спасибо, всё получилось!
А можно ли сверху наложить надпись?
|