Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.


Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..


Создаём новогоднюю поздравительную открытку
Создаём сложное выделение волос
Превращаем современную фотографию в старую
Создаём разноцветную светящуюся спираль
Наносим естественную татуировку в Фотошопе


Эффект смены картинок на jQuery


Сейчас мы научимся делать меняющиеся картинки с помощью технологии jQuery. Пример работы можете посмотреть здесь.


Итак, начнем:


Шаг 1.


Подготовим изображения размером 200х200 px. Скачать используемые в примере можно здесь. Скопируем их в папку с изображениями.


Шаг 2.


Скачаем и подключим необходимые скрипты. А именно скрипт jQuery 1.2.6.js и скрипт самого эффекта jQueryCycle.js. Для подключения нам необходимо разархивировать содержимое в папку scripts в корне сайта, а также вписать между тегами <hеad></hеad> следующий код:


<script type="text/javascript" src="scripts/jQuery 1.2.6.js"></script>
<script type="text/javascript" src="scripts/jQueryCycle.js"></script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;
$(function() {
$('td pre code').each(function() {
eval($(this).text());
});
});
</script>


Шаг 3.


В том месте, в котором мы хотим видеть меняющиеся изображения вставим код:


для первого эффекта:


<div id="s3">
<img src="images/1.jpg" width="200" height="200" />
<img src="images/2.jpg" width="200" height="200" />
</div>
<pre style="visibility:hidden"><code class="mix">$('#s3').cycle({fx: 'zoom',
sync:0, delay: -4000 });</code></pre>


или:


<div id="s4">
<img src="images/1.jpg" width="200" height="200" />
<img src="images/2.jpg" width="200" height="200" />
</div>
<pre style="visibility:hidden"><code class="mix">$('#s4').cycle({fx: 'scrollDown',
sync: 0, delay: -2000});</code></pre>


...для второго.


Готово!




Если хотите не упустить данный урок, добавьте его в закладки:  

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:     Добавлено: 2009-03-03    Просмотров: 2600    Сайт-источник: www.ruseller.com

Оцените урок: 1   2   3   4   5   6   7   8   9   10    



Комментарии (2)


Комментарий by Сергей Патин, От 2009-03-20

Видоизменять статьи НЕЛЬЗЯ! Тем более, что у вас ничего не работает!

Комментарий by Влада , От 2010-01-28

Здравствуйте! Мне очень понравился эффект. Разместила фото с эффектом в колонке сайта (пока ещё делаю сайт), но колонка растянулась, немного подпортив вид странички. Как можно уменьшить скрипт? Или это невозможно. Сайт делаю самостоятельно, знания на уровне дилетанта. Спасибо!

Оставить комментарий:

Ваше имя:

Комментарий:

Введите число показаное на картинке (проверка от автороботов):

  


 

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *
Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".


Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее


В версии Photoshop CS2 содержится много библиотек кистей (файлов с расширением .abr). Эти кисти можно загружать из меню палитры Brushes или раскрывающегося списка Brush на панели опций. В обоих случаях надо нажать стрелочку в правом верхнем углу – при щелчке по ней появится меню, в конце которого перечислены дополнительные файлы с наборами кистей.

Узнать больше


Внимание!
X
Хотите Получать 2 Видеоурока по Работе В Программе Фотошоп ЕЖЕМЕСЯЧНО?
Ваш e-mail: *
Ваше имя: *