-Рубрики

 -Приложения

  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Кнопки рейтинга «Яндекс.блоги» Кнопки рейтинга «Яндекс.блоги»Добавляет кнопки рейтинга яндекса в профиль. Плюс еще скоро появятся графики изменения рейтинга за месяц
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо

 -Всегда под рукой

 -Поиск по дневнику

Поиск сообщений в Шадрина_Галина

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 22.09.2013
Записей: 1425
Комментариев: 52844
Написано: 54910


Как сделать бегущую строку и бегущее изображение в дневнике

Пятница, 25 Июля 2014 г. 12:05 + в цитатник
<

Часто при написании своего сайта, или его управлением, возникает потребность установить на сайт бегущую строку. Такой элемент дизайна привлекает внимание посетителей на нужные разделы сайта, а также может выделить определенную информацию на передний план, что даст возможность первоочередного просмотра нужной темы.
7.gif

Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений, изображений, смайликов, банеров и т.д.
0_a67fa_cf6633a0_XL.jpg.gif

Создать бегущую строку на сайте – проще простого.

Для создания бегущей строки используют вот этот специальный тег "marquee", который и поможет вам сделать бегущую строку. Изначально он работал только в браузере Internet Explorer, но теперь почти во всех браузерах.( Не проверяла только в Google Chrome), в остальных работает нормально.

1. СТАНДАРТНАЯ ЗАПИСЬ БЕГУЩЕЙ СТРОКИ такая - :

<marquee>Бегущий текст</marquee>

Вставьте заголовок, приветствие, объявление, между этими тегами (ВМЕСТО МОИХ СЛОВ "БЕГУЩИЙ ТЕКСТ"), и вы получите бегущую строку. Будет это выглядеть ВОТ ТАК.

ДЕЛАЕМ БЕГУЩУЮ СТРОКУ

Бегущей строкой может быть не только текст, но и картинка, и ссылка на какой то сайт. Может быть и любой текст, созданный вами на сайтах, создающих красивые надписи. Как например "горящий текст", в предыдущем посте.


Текст можно форматировать так же, как и просто в посте. Например сделаем его большим, жирным, цветным, курсивом и прочее.

А проявив фантазию, или определив цели для использования текстов в своем дневнике, можно придумать довольно невероятные варианты написания бегущих строк для своих постов.

Наиболее распространенные я вам попытаюсь показать.


2. Ширину и высоту бегущей строки можно задать определенными параметрами, то есть поставить ширину строки и ее высоту. Теперь формула будет выглядеть вот такая.

<marquee width="500px" height="20px">заданные размеры блока строки</marquee>

Где width=" " - ширина блока для строки
height=" " - высота блока для строки

Выглядеть это будет вот так.
Задана высота и ширина строки.


3. МЕНЯЕМ ФОН БЕГУЩЕЙ СТРОКИ.
Фон бегущей строчки можно задать любой, какой вам нужен. Вот эта формула. Размеры строки можно не устанавливать. В первой формуле я их поставила, во второй нет.

<marquee bgcolor="#00FF33" width="500px" height="15px">меняем фон СТРОКИ</marquee><marquee bgcolor="#00FF33">меняем фон СТРОКИ, без указания ширины и длины</marquee>


где bgcolor=" " - атрибут устаналивающий параметр цвета фона

Выглядит это вот так

меняем фон СТРОКИ

меняем фон СТРОКИ, без указания ширины и длины



4. ДВИЖЕНИЕ СЛЕВА НАПРАВО.

Поскольку по умолчанию строчка движется, справа на лево, то что бы сделать наоборот, применяем вот эту формулу.

<marquee direction="right">движение слева направо</marquee>


Где left - движение справа налево (по умолчанию)
right - движение слева направо

Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СЛЕВА НАПРАВО.


5. ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ.
Можно задать движение строчки постоянно, то есть она будет двигаться попеременно в обе стороны.. Вот эта формула.

<marquee behavior="alternate">ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ</marquee>


где alternate - возвратно-поступательное движение

Выглядеть это будет ВОТ ТАК
ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ



6. ДВИЖЕНИЕ СНИЗУ ВВЕРХ.
Строчка, или изображение могут двигатся не только в разные стороны, но и снизу - вверх. Здесь лучше поставить ограничение строчки,(особенно высоту) или картинки, иначе она будет бегать по всей странице, и займет очень много места. Вот эта формула.

<marquee direction="up" width="150px" height="50px">>снизу вверх</marquee>


Где up - движение снизу верх

Выглядеть это будет ВОТ ТАК

ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СНИЗУ ВВЕРХ


7. ДВИЖЕНИЕ СВЕРХУ ВНИЗ.
Можно заставить текст двигаться и наоборот СВЕРХУ ВНИЗ. Вот эта формула.

<marquee direction="down" width="150px" height="50px">сверху вниз</marquee>


Где down - движение сверху вниз

Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СВЕРХУ ВНИЗ


8. МЕНЯЕМ СКОРОСТЬ ДВИЖЕНИЯ НА БОЛЕЕ МЕДЛЕННУЮ.
Скорость движения строчки тоже можно поменять, сделать быстрее, или медленнее. Для этого используют вот такую формулу.

<marquee behavior="alternate" direction="right" scrollamount="1">меняем скорость на медленную</marquee>


Где behavior=" " - атрибут устанавливающий тип строчки
alternate - возвратно-поступательное движение
direction=" " - атрибут устанавливающий направление
scrollAmount ="1" - устанавливает скорость движения строки. Цифру скорости можно менять.

Выглядеть это будет ВОТ ТАК
МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ

9. МЕДЛЕННОЕ ДВИЖЕНИЕ СТРОЧКИ СВЕРХУ ВНИЗ И НАОБОРОТ.
Регулировать скорость строчки вверх и вниз тоже можно. Для этого используют вот такую формулу.

<marquee direction="down" behavior="alternate" scrollamount="1" width="650px" height="50px">медленное движение текста снизу вверх и наоборот</marquee>

Где alternate - возвратно-поступательное движение
direction=" " - атрибут устанавливающий направление(в нашем случае сверху вниз и наоборот)
scrollAmount ="1" - устанавливает скорость движения строки. Цифру скорости можно менять.

Выглядеть это будет ВОТ ТАК
медленное движение текста снизу вверх и наоборот


10. СОЗДАНИЕ БЕГУЩЕЙ ССЫЛКИ НА САЙТ.
Можно создать и бегущую ссылку на какой то сайт, которые вы хотите показать читателям. Вот эта формула.

<marquee behavior="alternate" direction="right" scrollamount="1" width="500px" height="20px">строка со ссылкой на <a target="_blank" href="http://kapon.com.ua/" title="АДРЕС САЙТА">НАЗВАНИЕ САЙТА</a></marquee>


Выглядеть это будет ВОТ ТАК
МОЙ ДНЕВНИК НАХОДИТСЯ ЗДЕСЬ ДНЕВНИК ГАЛИНЫ ШАДРИНОЙ



11. БЕГУЩАЯ СТРОКА С ИЗОБРАЖЕНИЕМ.
Как я уже писала, что двигаться может не только строчка, но и любая картинка. Все выше приведенные формулы так же применимы и к картинкам. Только вместо СЛОВ, вставляется HTML - код картинки. Вот такая формула, к которой можно добавлять любые параметры движения.


<marquee direction="right" scrollamount="4"><img src="АДРЕС КАРТИНКИ" border="0" /></marquee>


Исходная картинка.
cat9-8.gif

Добавим формулу бегущей строки, и выглядеть это будет ВОТ ТАК
cat9-8.gif

Вот такие простые примеры бегущей строки, а проявив фантазию, можно придумать довольно невероятные варианты написания бегущих строк для своих сайтов.


Пропишу ВСЕ ЭТИ ФОРМУЛЫ ЕЩЕ РАЗ, УЖЕ со всеми параметрами. (то есть к каждой новой формуле добавляется новое значение, и поэтому формула становится все длиннее. Если вам не нужны ВСЕ ПАРАМЕТРЫ, то берите формулы выше, там каждый параметр отдельно)


<marquee>ПРОСТАЯ СТРОКА- ПО УМОЛЧАНИЮ</marquee><marquee width="500px" height="20px">ЗАДАННЫЕ РАЗМЕРЫ СТРОКИ</marquee><marquee bgcolor="#00FF33" width="500px" height="20px">МЕНЯЕМ ФОН БЕГУЩЕЙ СТРОКИ</marquee><marquee direction="right" bgcolor="#00FF33" width="500px" height="20px">ДВИЖЕНИЕ СЛЕВА НАПРАВО</marquee><marquee behavior="alternate" bgcolor="#00FF33" width="500px" height="20px">ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ</marquee><marquee direction="up" bgcolor="#00FF33" width="150px" height="50px"><br /> СНИЗУ ВВЕРХ</marquee><marquee direction="down" bgcolor="#00FF33" width="150px" height="50px">СВЕРХУ ВНИЗ</marquee><marquee behavior="alternate" direction="right" scrollamount="1" bgcolor="#00FF33" width="500px" height="20px">МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ</marquee><marquee direction="down" behavior="alternate" scrollamount="1" bgcolor="#00FF33" width="300px" height="50px">МЕДЛЕННОЕ ДВИЖЕНИЕ ТЕКСТА СВЕРХУ ВНИЗ И НАОБОРОТ</marquee><marquee behavior="alternate" direction="right" scrollamount="1" bgcolor="#00FF33" width="500px" height="20px">СТРОКА СО ССЫЛКОЙ НА САЙТ<a target="_blank" href="http://kapon.com.ua/" title="АДРЕС САЙТА">ССЫЛКА НА САЙТ (НАИМЕНОВАНИЕ)</a></marquee><marquee direction="right" scrollamount="4" bgcolor="#00FF33" width="500px" height="100px"><img src="АДРЕС КАРТИНКИ" border="0" /></marquee>


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


Или сотрите размеры строчки. Только помните что формула должна быть в угловых КАВЫЧКАХ, поэтому не убирайте их.


Пробуйте смелее и у вас все получится.

Серия сообщений "Шпаргалки":
Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
Часть 3 - Рамочки - линии для выделения текста
...
Часть 28 - Вставляем картинки в свои сообщения
Часть 29 - Справочник html по изображениям
Часть 30 - Как сохранить гифку из Одноклассников

Метки:  

Процитировано 444 раз
Понравилось: 196 пользователям

tatyana_leona   обратиться по имени Пятница, 25 Июля 2014 г. 12:23 (ссылка)
Спасибо, Галочка! Очень пригодится!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:05ссылка
Рада что все понятно!
Васточка   обратиться по имени Пятница, 25 Июля 2014 г. 12:24 (ссылка)
спасибо за такое подробное и разнообразное описание
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:05ссылка
Рада что все понятно!
Gloriy_65   обратиться по имени Пятница, 25 Июля 2014 г. 12:39 (ссылка)
Шадрина_Галина, Благодарю,Галина!Чудесного дня!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:05ссылка
Спасибо! Погода в этом году нас не балует!
Галина_Новоселова   обратиться по имени Пятница, 25 Июля 2014 г. 12:47 (ссылка)
Галочка, спасибо пригодится. Взяла себе.
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:04ссылка
Рада что все понятно!
zhizn   обратиться по имени Пятница, 25 Июля 2014 г. 12:52 (ссылка)
Галина,спасибо!Беру!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:04ссылка
Рада что все понятно!
NIKALATA   обратиться по имени Пятница, 25 Июля 2014 г. 12:56 (ссылка)
Галочка, спасибо большое.
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:04ссылка
Рада что все понятно!
yuriy_iWowWe   обратиться по имени Пятница, 25 Июля 2014 г. 13:11 (ссылка)
БОЛЬШОЕ ВАМ СПАСИБО!
Моим Друзьям!~Картинки для друзей
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:04ссылка
Рада что все понятно!
Марина_55   обратиться по имени Пятница, 25 Июля 2014 г. 13:15 (ссылка)
Спасибо, Галочка!
Беру с удовольствием!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:04ссылка
Рада что все понятно!
lola-malvina   обратиться по имени Пятница, 25 Июля 2014 г. 13:32 (ссылка)
Добрый день,Галочка! Очень всё нужное и полезное для эффектного оформления...Спасибо тебе,наша труженица!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:04ссылка
Рада что все понятно!
мадам-_тата   обратиться по имени Пятница, 25 Июля 2014 г. 13:39 (ссылка)
Здравствуй Галочка! Спасибо тебе огромное! так просто и интересно! Удачи тебе и хороших выходных!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:03ссылка
Спасибо! Рада что все понятно!
Ирина_Лыткина   обратиться по имени Пятница, 25 Июля 2014 г. 14:15 (ссылка)
Благодарю Галина за полезный урок!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:03ссылка
Рада что все понятно!
lmedyankina   обратиться по имени Пятница, 25 Июля 2014 г. 14:31 (ссылка)
Спасибо большое Галиночка!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:03ссылка
Рада что все понятно!
Валентина_999   обратиться по имени Пятница, 25 Июля 2014 г. 14:31 (ссылка)
Спасибо Галина ,для многих это будет интересно
getImage7ZA4B0GW (410x410, 50Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:03ссылка
Лишь бы было все понятно!
Валентина-   обратиться по имени Пятница, 25 Июля 2014 г. 15:32 (ссылка)
БОЛЬШУЩЕЕ СПАСИБО!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:03ссылка
Рада что все понятно!
gudosh   обратиться по имени Пятница, 25 Июля 2014 г. 15:53 (ссылка)
Большое спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:02ссылка
Рада что все понятно!
-_Stella   обратиться по имени Пятница, 25 Июля 2014 г. 18:23 (ссылка)
Благодарю!!! Забираю!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:02ссылка
Рада что все понятно!
Еленсия   обратиться по имени Пятница, 25 Июля 2014 г. 19:00 (ссылка)
Здравствуйте Галина.Благодарю за науку,пригодится.
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:02ссылка
Рада что все понятно!
Лариса_Виноградова   обратиться по имени Пятница, 25 Июля 2014 г. 21:14 (ссылка)
Спасибо, Галочка!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:02ссылка
Рада что все понятно!
Mila-milay   обратиться по имени Пятница, 25 Июля 2014 г. 22:04 (ссылка)
Шадрина_Галина, благодарю Вас!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:02ссылка
Рада что все понятно!
Галина__К   обратиться по имени Пятница, 25 Июля 2014 г. 22:08 (ссылка)
Спасибо Галя,интересно,пригодится,переписала формулы в тетрадь.
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:01ссылка
Я их просто копирую и сохраняю в компе.В одном документе собраны все формулы, очень удобно.
Перейти к дневнику

Суббота, 26 Июля 2014 г. 21:08ссылка
Я тоже иногда сохраняю,но так уж привыкла к тетрадочке,надёжнее
Алло_чка44   обратиться по имени Пятница, 25 Июля 2014 г. 22:50 (ссылка)
Спасибо большое Галина! В таких подробностях! Молодец! Цитирую!
Ответить С цитатой В цитатник
Перейти к дневнику

Пятница, 25 Июля 2014 г. 23:02ссылка
Рада что все понятно!
Бущан_Зоя   обратиться по имени Суббота, 26 Июля 2014 г. 00:14 (ссылка)
Благодарю!!!
Ответить С цитатой В цитатник
варвара15   обратиться по имени Суббота, 26 Июля 2014 г. 07:25 (ссылка)
Ответить С цитатой В цитатник
вал22   обратиться по имени Суббота, 26 Июля 2014 г. 09:21 (ссылка)
Спасибо,Галочка,всё подробно и понятно!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 27 Июля 2014 г. 00:17ссылка
Рада что все понятно!
доценко   обратиться по имени Суббота, 26 Июля 2014 г. 10:09 (ссылка)
Ответить С цитатой В цитатник
Hedgehog2014   обратиться по имени Суббота, 26 Июля 2014 г. 10:19 (ссылка)
СПАСИБО.
Ответить С цитатой В цитатник
PEREMILA   обратиться по имени Суббота, 26 Июля 2014 г. 10:50 (ссылка)
Большое спасибо вам Галина за ваши труды.
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 27 Июля 2014 г. 00:17ссылка
Рада что все понятно!
Лилёша   обратиться по имени Суббота, 26 Июля 2014 г. 12:17 (ссылка)
Благодарю!
Ответить С цитатой В цитатник
Галина_Лобанова   обратиться по имени Суббота, 26 Июля 2014 г. 13:13 (ссылка)
Спасибо, Галочка. Очень ценный пост.Цитирую.
2b6515190e880e44cd290b682e744c2d (520x680, 407Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 26 Июля 2014 г. 23:10ссылка
Рада, что все понятно!
Дневник_Девы   обратиться по имени Суббота, 26 Июля 2014 г. 14:43 (ссылка)
Спасибо ВАМ! С Вашим именем столько полезного в Интернете и на разных сайтах связано!)))) С благодарностью,Вероничка....
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 26 Июля 2014 г. 23:10ссылка
Спасибо Вероничка за добрые слова! Очень рада, что мои уроки кому то помогают!
Комментировать К дневнику Страницы: [1] 2 3 4 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку