 |
ITrader
Современная, простая программа с неограниченными возможностями преобразования
времени, знаний и опыта в деньги! Бесплатный доступ ко всем финансовым рынкам,
к мировым торгам и профессиональному росту. Скачай и открой бесплатный Демо-счет!
Дистанционное обучение. Депозит от 1000 рублей. ФГ Калита-Финанс.
Подробнее... |
Разное
Дата публикации: 26 Августа 2004
Автор: Тищенко В. А.
Если Вы web-дизайнер и Вам понадобилось
сотворить череду изображений сменяющих друг друга при помощи какого-либо эффекта
перехода, то здесь я позволю себе предложить Вам один из способов реализации этой
затеи.
Для реализации задуманного Вам потребуется:
Ваши изображения (желательно одного размера) и любой текстовый редактор способный
редактировать html-документы.
Для примера возьмем четыре файла формата
GIF и поименуем их slide_1.gif - slide_4.gif соответственно. Затем создайте файл
index.html и откройте его в текстовом редакторе.
Для начала нам понадобится тег <img>,
в котором и будет происходить смена изображений. Свойству src этого тега
присвоим имя первого файла в последовательности слайдов, а так же при помощи свойства
id этот тег идентифицируется именем slaid. Для нашего примера это
будет выглядеть следующим образом:
<img src="slide_1.gif" id="slaid">
Теперь необходимо, при помощи CSS, указать
какой фильтр будет использован для перехода между изображениями. В нашем случае
это выглядит следующим образом:
<style type="text/css">
img {filter: blendTrans(duration=3.0);
}
</style>
Здесь видно, что для тега <img>
устанавливается фильтр blendTrans (плавный переход) с параметром
duration (продолжительность) равным трем секундам.
Теперь можно переходить к непосредственному
написанию сценария на языке JavaScript, который будет выполнять замену изображений.
Для этого откроем тег:
<scritp language="JavaScript" type="text/javascript"
>
Затем переменную типа массив длиной
в четыре элемента:
var img_array = new Array(4);
Далее следует код, который отвечает
за загрузку всех слайдов до начала слайд шоу:
for (n=0;n<=3;n++) {
img_array[n] = new Image();
next=n+1;
img_array[n].src = "slide_"+next+".gif";
}
Поскольку имена файлов, в которых хранятся
изображения слайдов, отличаются только порядковым номером, то процесс их загрузки
можно поместить в цикл for. В теле цикла первое выражение при помощи команды
new Image() создает объект типа Image (изображение) и присваивает
его текущему элементу массива.
Затем следует выражение:
next=n+1;
Оно необходимо, так как элементы массива
начинаются с нуля, а нумерация файлов начинается с единицы.
Так как созданный ранее объект типа
Image по своим свойствам полностью соответствует тегу <img>, то при
помощи последнего выражения в теле цикла свойству src данного объекта присваивается
имя соответствующего файла.
После того как все изображения были
загружены в оперативную память пользователя, можно приступать к реализации перехода
между ними. Для этого напишем следующую функцию:
i = 1;
function doFilter() {
slaid.filters[0].Apply();
slaid.src = img_array[i].src;
slaid.filters[0].Play();
i = i+1;
if (i == 4) i = 0
}
Переменная i, объявленная перед
функцией играет роль индекса элементов массива и по умолчанию имеет значение 1.
Первое выражение в функции можно примерно
перевести на русский язык следующим образом: “Вызвать метод Apply() нулевого
фильтра для объекта изображения с именем slaid”. Этот метод “замораживает”
видимое в данный момент изображение и позволяет изменить значение параметров перехода
и самого изображения, не требуя немедленного применения перехода.
Во второй строке свойству src
объекта изображения присваивается значение свойства src текущего элемента
массива объектов изображений загруженных ранее.
В третьей строке для выполнения перехода
используется метод Play().
Затем осуществляется переход к следующему
элементу массива при помощи увеличения индекса массива на единицу. После чего индекс
сравнивается с четверкой и если результатом сравнения будет true (истина),
то индекс обнуляется.
Теперь нам осталось только вызвать нашу
функцию при помощи функции setInterval(). Для нашего примера это выглядит
так:
setInterval("doFilter()", 4000);
Эта функция выполняет операцию или другую
функцию, которая была передана ей первым параметром все время через промежуток равный
второму параметру, который задается в миллисекундах. В нашем случае функция doFilter()
будет выполнятся через четыре секунды.
После этого не забудте закрыть тег
<script>.
И в завершении хотелось бы заметить,
что в HTML 4.0 существует еще один фильтр перехода revalTrans, который позволяет
осуществлять переходы между изображениями аж 24-я способами. А главное то, что это
слайд шоу можно легко адаптировать для взаимодействия с другими частями вашего сайта,
такими как кнопки, ссылки и остальные управляющие элементы.
***
Смотрите также:
Внимание - женщина-программист!
Интересное за неделю (24-28 сентября)
Абонементное обслуживание компьютеров: что почем?
Что такое бюро переводов Транс Терра?
Fido – сеть друзей
Все статьи рубрики
Разное
|
