mangiana_irina (mangiana_irina) wrote,
mangiana_irina
mangiana_irina

Category:

"БЕГУЩАЯ СТРОКА" И СЛАЙД-ШОУ СВОИМИ РУКАМИ

Сегодня мы научимся делать слайд-шоу собственными руками, без испоьзования плеера с Яндекс-Фоток.

Для этого вначале познакомимся с "бегущей строкой".

Все бегущие строки создаются с помощью тэгов <marquee>...</marquee>



Текст движется

По умолчанию строка движется справа налево.

Чтобы изменить направление движения, используем в тэге marquee атрибут direction, задающий направление движения.

Для движения направо:



Для движения вверх:



Для движения вниз:



Кроме команды direction тэг marquee может содержать атрибут behavior, задающий поведение бегущей строки.

behavior="scroll" –прокрутка текста. Это значение можно не указывать, т.к. текст по умолчанию всегда прокручивается.



behavior="slide" – Прокрутка текста с остановкой



behavior="alternate" – Движение от края к краю



Другие aтрибуты:

scrollamount="1" – скорость движения строки. Может изменяться от 1 до 9.

scrolldelay="20" – Этот атрибут задаёт временной интервал в миллисекундах между шагами бегущей строки.

width="200" – ширина бегущей строки в пикселях или процентах от ширины экрана.

height="17" – высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).

bgcolor="#E9E9D1" – Задаёт фоновый цвет бегущей строки. (Вместо E9E9D1 подставляйте свой цвет).

loop="2" – задаёт число проходов бегущей строки. (Если указать "2" то два раза текст проедет и больше показываться не будет, только если ещё раз обновить страницу).

hspace="70" - атрибут задает поле в пикселах справа и слева от бегущей строки.

vspace="70" - атрибут задает отступ в пикселах выше и ниже бегущей строки.

Чтобы двигалась картинка, заменим текст между тегами ... ссылкой на картинку:



Теперь приступим к изготовлению слайдшоу.

1. Заходим в альбом с нужными картинками на Яндекс.Фотках, нажимаем на ссылку "получить код", отмечаем все нужные изображения.

2. Внизу страницы в верхней строке последнего окошка с кодами выбираем нужный размер фоток. Подбирая картинки для слайд шоу, помните, что чем больше размер и количество фото, тем "тяжелее" будет ваше произведение, тем дольше будет грузится страница со слайдшоу..

3. Копируем содержимое окошка с кодами в любой текстовый файл. Всё, страницу с Яндекс.Фотками можно закрыть.

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



5. Формируем слайдшоу.

5.1. Открываем файл с подготовленным списком кодов картинок и каждой из них дописываем теги следующим образом:



5.2. Определяемся с параметрами слайдшоу (ширина слайдшоу 130 px, движение вправо, скорость движения 3) и пишем код:



5.3. Для того, чтобы картинки в слайдшоу не "склеивались", можно добавить между ними промежутки с помощью символа неразрывного пробела   

6. Вставляем код слайдшоу внутрь приготовленного кода таблички-рамочки:



Источник: dkartasheva.ya.ru/replies.xml?item_no=2111&ncrnd=8717

********************************************

Если Вы хотите сделать слайд-шоу, а не убирать картинки (фотографии) под кат, то просто воспользуйтесь приведёнными в таблице кодами.

Движение снизу вверх
Движение сверху вниз
Движение справа налево
Движение слева направо
Для изменения места нахождения картинки или текста
текст или картинка слева

слева

текст или картинка справа

справа

текст или картинка по центру

по центру



Порядок действий:

1.    Загрузите нужное количество картинок на сервер я загружаю на  радикал пост ниже

2.    Определитесь с направление и добавляйте код.
Картинки должны быть внутри кода вместо слова Движение!!! То есть получается, что первая половина кода стоит перед картинками, а вторая после картинок, а вместо слов ДВИЖЕНИЕ СЛЕВА НАПРАВО - картинки.

100рх – это размер окна, в котором будет показано шоу, поменяв это значение на нужное Вам, Вы получите подходящий размер окна.

scrollamount="5"  - поменяв цифру 5 на другую Вы измените скорость движения.

Также эти коды можно и использовать для текста - Замените слова ДВИЖЕНИЕ - на Ваш текст и он начнёт двигаться так же как и картинки в нужном Вам направлении

источник: clubs.ya.ru