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, чтобы запомнить эту страничку





Warning: Use of undefined constant DB_HOST - assumed 'DB_HOST' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/db.php on line 17

Warning: Use of undefined constant DB_USER - assumed 'DB_USER' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/db.php on line 19

Warning: Use of undefined constant DB_PASSWORD - assumed 'DB_PASSWORD' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/db.php on line 20

Warning: Use of undefined constant DB_NAME - assumed 'DB_NAME' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/db.php on line 22

Warning: Use of undefined constant id - assumed 'id' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comments.php on line 27

  • Warning: Use of undefined constant name - assumed 'name' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 29
    Кеша
    Warning: Use of undefined constant date_add - assumed 'date_add' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 29
    12 Апреля 2011 22:03

    Warning: Use of undefined constant comment - assumed 'comment' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 33
    Мне понравилась третья сверху. Она по-настоящему женственна.

    Ее сила в ее слабости - чего явно не хватает современным деловым дамам!
    Ответить

    Warning: Use of undefined constant childs - assumed 'childs' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 43

  • Warning: Use of undefined constant name - assumed 'name' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 29
    ю
    Warning: Use of undefined constant date_add - assumed 'date_add' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 29
    14 Апреля 2011 19:53

    Warning: Use of undefined constant comment - assumed 'comment' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 33
    ю
    Ответить

    Warning: Use of undefined constant childs - assumed 'childs' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 43

  • Warning: Use of undefined constant name - assumed 'name' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 29
    fzdfg
    Warning: Use of undefined constant date_add - assumed 'date_add' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 29
    08 Июля 2015 19:02

    Warning: Use of undefined constant comment - assumed 'comment' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 33
    sdfsfsfsdfs
    Ответить

    Warning: Use of undefined constant childs - assumed 'childs' (this will throw an Error in a future version of PHP) in /home/users/a/abramov0/domains/kocby.ru/post/webmaster/jquery/girls7/comment_template.php on line 43
  • X
    Ваше имя:
    Комментарий:


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

* На верх *

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


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