7 девушек. Использование jQuery.

Girls, girls, girls... /из какой-то песни/


7 девушек. Использование jQuery для создания сменяемых изображений.

7 девушек. Использование jQuery для создания сменяемых изображений.
Сделано в kocby.ru

На этой страничке мы рассмотрим некоторые функции jQuery для элегантного отображения и скрытия графических файлов.
newImage.hide(); - делает предварительно новое изображение невидимым (чтобы не пугать пользователя слишком резким появлением девушки).
oldImage.fadeOut(1000,function(){$(this).remove();}); - обеспечивает медленное угасание "старой" девушки.
newImage.fadeIn(1000); - дает возможность медленно "родиться" новой.
Значения 1000 в функциях fadeOut и fadeOut - количество миллисекунд эффектов появления и исчезания. Таким образом, в нашем примере 1 секунда тратится на уход "старой" девушки и 1 секунда на появление новой.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru/.


На этой страничке мы рассмотрим некоторые функции jQuery для элегантого отображения и скрытия графических файлов.

Чтобы использовать эти эффекты, следует их присвоить выборке jQuery.

Если коротко, последовательность действий при работе функционала этой странички следующая:

newImage.hide(); - делает предварительно новое изображение невидимым (чтобы не пугать пользователя слишком резким появлением девушки).

oldImage.fadeOut(1000,function(){$(this).remove();}); - обеспечивает медленное угасание "старой" девушки.

newImage.fadeIn(1000); - дает возможность медленно "родиться" новой.

Значения 1000 в функциях fadeOut и fadeOut - количество миллисекунд эффектов появления и исчезания. Таким образом, в нашем примере 1 секунда тратится на уход "старой" девушки и 1 секунда на появление новой.

Тексты программ на javascript-е, которые обеспечивают медленное появление и исчезновение изображений можно посмотреть и/или скачать: здесь.

Важно понимать, что технология jQuery (да и вообще javascript-инга) тесно связана с технологией CSS. Файл с используемыми стилями можно посмотреть и/или скачать: здесь.

Для улучшения понимания технологии jQuery, рекомендуем изучить следующие выпуски рассылки для вебмастеров:
153, 154, 177, 178, 179, 180, 181, 182, 183, 184, 185.

Тонкость: загрузка изображений производится предварительно.

Предварительная загрузка производится с целью избежать задержек при смене картинок пользователем и означает указание браузеру загрузить картинку в кэш рабочей станции пользователя до ее показа.

Вряд ли такое решение является слишком умным и экономичным. В конце концов, пользователь может вообще не захочет рассматривать определенную девушку, а она уже есть в его компьютере. Нехорошо. С другой стороны, лишние несколько килобайт информации (именно столько весят все картинки в сумме), это пустяки в наше время, когда процветают мультимедийные сайты, торренты и прочие трафик-обильные ресурсы.

Работает все это так.

Картинки невыбранных девушек находятся здесь:
src="images/small/girl01-60x60.jpg"
src="images/small/girl02-60x60.jpg"
src="images/small/girl03-60x60.jpg"
src="images/small/girl04-60x60.jpg"
src="images/small/girl05-60x60.jpg"
src="images/small/girl06-60x60.jpg"
src="images/small/girl07-60x60.jpg"

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

var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');

В результате получаем:
src="images/small/girl01-60x60_h.jpg"
src="images/small/girl02-60x60_h.jpg"
src="images/small/girl03-60x60_h.jpg"
src="images/small/girl04-60x60_h.jpg"
src="images/small/girl05-60x60_h.jpg"
src="images/small/girl06-60x60_h.jpg"
src="images/small/girl07-60x60_h.jpg"

Тонкость: работа этой странички при отключенном JavaScript.

Некоторые, излишне умные пользователи отключают JavaScript в своих браузерах. Зачем они это делают, лучше спросить у них самих, а вот как это сделать, можно прочитать здесь: 154.

Что касается конкретно данной странички, то при выключенном JavaScript пользователь все равно сможет просматривать картинки, хотя это будет не так удобно и красиво.

А вот что касается встроенной Книги Отзывов внизу, то здесь будет такое ограничение: пользователь сможет читать чужие записи, но публиковать свои - нет.

Надеюсь, что у вас, как у большей и лучшей части пользователей Интернета JavaScript включен, а значит, вы сможете опубликовать свое мнение о том, какая девушка победит в этом мини-конкурсе красоты.

###


Куда теперь идти?

Используйте ссылки выше или ниже...

  • Публикация своего мнения об этой страничке :: Вы можете прямо на этой страничке, прямо сейчас опубликовать свое мнение о девушках вообще, о девушке, которая вам нравится, о JavaScript-инге вообще и о библиотеке jQuery в частности. Имейте в виду, что эта Ваша публикация будет доступна для всех посетителей сайта.

  • Страничка контактов :: Вы можете написать в Клуб письмо по любой теме, включая ваше мнение об этой страничке. Ваше письмо попадет напрямую менеджеру данного раздела и не будет прочитано посетителями сайта.

  • Видеокурс: "Javascript+jQuery для начинающих в видеоформате" :: Javascript + jQuery для начинающих в видеоформате. Хотите изучить JavaScript и jQuery, стать настоящим профи в веб программировании? Почти все современные сайты, работающие без перезагрузки страниц, основаны на технологии Javascript + jQuery. Специально для вас современная методика, разработанная Евгением Поповым. Она является оптимальной по соотношению цена/качество. Предлагаем вашему вниманию видеокурс: "Javascript+jQuery для начинающих в видеоформате". Евгений Попов в данном курсе использовал современные методики обучения, которые доказали свою эффективность.

  • Поиск :: Каждый день мы с вами пользуемся услугами любимых поисковых систем. Примеры локального поиска. Тематический поиск. Поиск книг, игр, фильмов, музыки, софта.

  • kocby.ru, главная страничка сайта.


Если Вы планируете зайти позднее...
Запомните эту страничку -

URL: http://kocby.ru/post/webmaster/jquery/girls7/

Нажмите CTRL-D, чтобы запомнить эту страничку




  • Кеша 12 Апреля 2011 22:03
    Мне понравилась третья сверху. Она по-настоящему женственна.

    Ее сила в ее слабости - чего явно не хватает современным деловым дамам!
    Ответить
  • ю 14 Апреля 2011 19:53
    ю
    Ответить
  • fzdfg 08 Июля 2015 19:02
    sdfsfsfsdfs
    Ответить
  • X
    Ваше имя:
    Комментарий:


Створки зеркала Клуба Одиноких Сердец. Пыльное зеркало Клуба Одиноких Сердец.

* На верх *

Евгений Попов. Javascript + jQuery для начинающих в видеоформате Практическое применение школьных знаний.
Новогодний шахматный турнир. Информационная безопасность
одинокое сердце
Правильная любовь
По правильным
правилам!
А роза упала...
eГармония


ВНИМАНИЕ! Спасибо за посещение этой странички!
CopyRight(R), CopyLeft(L), CopyCat(C)
1974 - 2074 Клуб Одиноких Сердец
Без поддержки людей из будущего этот проект, конечно же, у меня бы не получился. Спасибо всем, кто делает будущее уже сегодня - USA2017.com!