Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Эффект приближения и отдаления изображений

Автор: Андрей Краснокутский

Дата: 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 формате.

Обучающий Видео Курс по созданию сайтов.

 

Просмотров: 17296


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Николай Гижицкий
Дата: 2011-10-17

Отличная реализация! Значительно круче чем предыдущий урок! Спасибо!!!

Комментарии добавил(а): Гульшат
Дата: 2011-10-16

Спасибо, очень полезный урок! Благодарю

Комментарии добавил(а): Наргиз
Дата: 2012-02-13

Спасибо огромное, просто клева!

Комментарии добавил(а): Игорь
Дата: 2012-01-23

Вобще-то этот эффект называется Ken Burns effect, а плагин CrossSlide

Комментарии добавил(а): Вячеслав
Дата: 2012-07-21

На Ucoz чо то не пашет

Комментарии добавил(а): Texnik.pro
Дата: 2012-09-25

у меня не получилось на сайте у себя сделать

Комментарии добавил(а): Иван
Дата: 2015-05-01

Классно! Огромное спасибо, всё очень грамотно описано!

Комментарии добавил(а): Наталья
Дата: 2015-10-22

Здравствуйте! Большое спасибо, всё получилось! А можно ли сверху наложить надпись?

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Как заработать деньги в Интернете?
Создай свой ИнфоБизнес


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT