В данной статье я представляю смешанный вариант, совмещающий техники простого слайд-шоу, описанного в статье Слайд-шоу с мульти-переходами и автоматику из статьи Живые Ссылки 2. Так же, как во второй статье, здесь записан вариант с использованием универсальной функции с инкапсулированным кодом. Это так называемый объектный подход. Функция описывает не конкретный объект, а целый класс объектов и для установки на сайте нового объекта достаточно просто еще раз вызвать функцию. Более подробно можно посмотреть в указанной статье. Но в отличие от "живых ссылок", здесь картинки даются без подписи и без ссылки, но зато с использованием всего арсенала из 24 переходов, как описано в первой статье. Для конкретного пользователя важно знать как пользоваться универсальной функцией. При этом можно совсем не интересовать как она написана. Я начну с описания как ей пользоваться.
Как обычно, я даю полный код сайта примера и объясню как он использует универсальную функцию. Сама универсальная функция записана в другом файле, который пользователь может даже не смотреть, если не интересно. Его имеет смысл смотреть в том случае, если захочется модифицировать объект и придать ему другие свойства. Для того, чтобы код работал, нужно скопировать указанный ниже текст в файл с расширением htm и подключить копию файла superimage.js, оба файла в одной и той же папке и запустить на исполнение htm файл, он будет работать. Для лучшего понимания моих комментариев советую это проделать. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S. Итак, сначала htm файл
Посмотрим что здесь написано. Область div с атрибутом id="ew" -- это фактически внешняя область сайта, в которую помещаются объекты, она может быть самой различной у разных пользователей. Внутри нее находятся две пустые области div с атрибутами id="mw1" и id="mw2". Вот эти области и предназначены для того, чтобы javascript код записал в них полный объект в виде анимированной картинки. Далее идет ссылка на код стандартной функции superimage() и после этого javascript код задания входных данных для двух объектов и два вызова стандартной функции с разными наборами входных данных. При вызове функции записываются два аргумента: js-объект, содержащий входные данные, и значение id атрибута области, в которую записывается HTML-объект. Объекты автоматически записываются как блоковые, но их режим позиционирования и координаты надо задавать явно, они автоматически не прописываются, потому что тут могут быть различные варианты. В частности в рассматриваемом примере задается абсолютное позиционирование для двух областей и указаны разные координаты для них.
Еще раз замечу, что в javascript есть большая путаница со смыслом слова объект. В HTML объектами обычно называются части сайта, описываемые тегами, а в javascript объектами называются хэш-таблицы, в которых каждый кусок кода получает метку. Так вот первым аргументом при вызове функции является js-объект (хэш-таблица). Для простоты будем понимать js-объект как массив, заключенный не в квадратные, а в фигурные скобки. Каждым элементом такого массива является пара "ключ:значение", разделенная знаком двоеточия, а разные пары разделяются запятой. При этом значением может быть любой js-код, в нашем случае это массивы. В нашем объекте три такие пары. Первая имеет ключ imga, а значение в виде массива строк, описывающих кадры анимации. Каждый кадр описывается одной строкой -- URL адресом картинки. Всего строк должно быть n, где n -- число кадров анимации. Все строки разделяются запятыми, а весь массив заключен в квадратные скобки.
Вторая пара имеет ключ par и значение в виде массива чисел. Всего чисел 5 и от их значений зависит функциональность кода. Числа условно можно обозначить как w,h,p,pa,nm , где w и h -- это ширина и высота картинок. Все картинки должны быть одинакового размера и их ширина и высота в пикселях должны соответствовать эти числам. Или наоборот, числа показывают ширину и высоту картинок. Если это не так, то картинки будут масштабироваться на данный размер. Параметр p -- это длительность показа одного кадра после перехода в секундах, можно задавать и дробное число, но нет смысла мелочиться, pa -- это тоже длительность, но она относится к показу одного кадра при переходе и измеряется в миллисекундах, nm -- это число кадров перехода. Третья пара имеет ключ ifc и значение в виде массива чисел - номеров переходов. Всего переходов 24 с номерами от 0 до 23. Но переход 0 самый простой, то есть мгновенный и его лучше не ставить, фасонных переходов 23. При каждой новой смене кадра реализуется новый тип перехода, пока не будут использованы все номера, после чего массив номеров проходится повторно от начала до конца и так далее. Можно указывать любое число элементов массива, хоть всего один. В примере указаны все 23, хотя картинок всего 8. Значит остальные переходы просто не используются.
Как видим, все очень просто и удобно. Такой шаблон можно использовать даже не зная javascript. И можно просто менять адреса картинок, не трогая всего остального. При этом поставить сколько угодно анимаций с любым числом и типом фасонных переходов совсем не трудно. Универсальная функция в файле superimage.js может рассматриваться как элемент js библиотеки, но не имеет смысла все элементы записывать в один файл. Это элемент билиотеки файлов. Первым элементом была функция superlink.js, а это второй элемент. Для тех, кто хочет узнать код этой функции я покажу его ниже. Его надо скопировать в файл superimage.js.
Код относительно большой, поэтому я поместил его в окно с линейками прокрутки. Читать такой код не очень удобно, но достаточно скопировать его в редактор с большим окном и с подсветкой синтаксиса и читать там. Но все же кое что видно и можно понять что представляет собой код. Самое первое -- это то, что у функции всего один аргумент, а при вызове было два. Фокус в том, что мы вызывали не саму функцию, а ее метод call, а для этого метода уже надо два аргумента. Первый аргумент передает объект, который в самом коде используется в виде слова this. Это слово является js-объектом, методы которого вызываются по ключам, а исполняется тот код, который этому ключу соответсвует. Таким образом, аргументом функции является только атрибут id той области, которая принимает данный HTML-объект, то есть в который будут вписаны все HTML теги и CSS формат, и все это будет крутиться вертеться нужным образом.
Итак, в начале нужно описать все переменные, используемые в коде, чтобы ограничить область их видимости только функцией. Затем описан стандартный массив параметров переходов, который прочитывает функция move(). Сама функция является комбинацией кода анимации с 24 переходами с кодом живых ссылок. Она расщепляет текстовую строку с описанием параметров перехода на массив строк с одним числом каждая. Затем считывает значение в переменные. Остальной код полностью описывает все переходы в зависимости от переменной kt, которая определяет тип перехода. Из кода вычищены все куски, описывающие работу кнопок, кроме одной кнопки, позволяющей быстро перейти к следующему кадру. После описания функций идет собственно код формирования html тегов и CSS форматирования, а затем функция запускается. Как это делается можно почитать в статье Живые Ссылки 2.
Вот и все. Здесь инкапсулируется уже довольно сложный код. А метод создания объектов на сайте очень похож на то, как размножаются объекты в языках ООП с классами, то есть Java и C++. То есть даже без классов код функции с объектом в аргументе и с ипользованием метода call позволяет размножать объекты на сайте точно также как и с использованием конструктора и метода new.
Все, да не все. Практика показала, что есть некоторая непонятная сложность. Если использовать несколько окон с анимацией, в которых одинаковое число картинок, то все хорошо. Но если число картинок разное, то возникают фокусы с неправильной отработкой переходов. Только в последнем окне все нормально, а в предыдущих окнах переходы отрабатываются не так, как было задумано. Тестирование разных вариантов позволило сделать вывод, что программа правильно работает только в том случае, когда порядок переходов во всех окнах одинаков. Это всегда получается при равном числе картинок во всех окнах. А если число картинок разное, то оно должно иметь общий делитель и можно использовать только малое число переходов, равное этому делителю. То есть один переход всегда, два только для четных чисел картинок и так далее.
Ясно, что это очень сильное ограничение. Возможно, что оно как-то связано с тем, что javascript код написан не оптимально, я пока не знаю ответа на этот вопрос. Но на всякий случай я сделал другой вариант, который незначительно отличается от показанного выше, но позволяет ставить в окна произвольное число картинок. Единственное условие состоит в том, что таблицы переходов во всех окнах должны совпадать. В старой программе к каждой картинке приклеивается свой переход. В новой программе, счетчик переходов независим от счетчика картинок. Он крутится сам по себе, и не важно, сколько картинок реально есть в анимации. Важно, что переходы во всех окнах совпадают всегда. Новую функцию я назвал "superimg". Ниже я показываю ее код
Пример применения функции показан ниже в виде трехоконной анимации.
Несмотря на ограничения, обе функции, а особенно вторая, являются очень мощным инструментом оживления сайтов. Фактически, вторая функция "superimg" вполне самодостаточна и первая функция уже не нужна. Но я оставил ее просто как объект истории. Она нормально работает при одинаковом числе картинок в окнах и одинаковых переходах. Будущее покажет как надо решать проблемы И возможно удасться сделать более универсальный инструмент совсем без ограничений.
Автор: Виктор Кон, перейти На главную