Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Как сделать на сайте Бегущую Строку.

Автор: Андрей Краснокутский

Дата: 2011-04-29

Скрипт для сайта: Бегущая строка.

Сегодня мы рассмотрим новый скрипт для сайта: Бегущая строка. При наведении мыши на бегущий текст, строка останавливается. Ниже приведен пример работы скрипта:

Открыт новый раздел нашего сайта: Почтовая Рассылка. В разделе Вы узнаете о всех тонкостях Почтовых рассылок, а также какую огромную пользу приносит Почтовая Рассылка владельцам сайтов!!!

Скрипт для сайта Бегущая строкаКак видите текст в бегущей строке можно редактировать: изменять цвет, делать жирным, придавать ему различные стили, т.е. это обычный текст и соответственно на него распространяются все правила HTML. Кроме того Вы можете сюда запросто вставлять ссылки. Кстати ссылка рабочая, если кликните по ней, попадете в новый раздел нашего сайта, который посвящен организации собственной Почтовой рассылки, рекомендую почитать.

Теперь смотрим код скрипта, приведен в Листинге 1:

Листинг 1.

<marquee behavior="scroll" scrollAmount="3" width="400" height="20" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3">
Здесь вставляем текст, который будет отображаться в бегущей строке.
</marquee>

Теперь давайте разбираться с листингом, а также посмотрим, что здесь Вам можно изменять и что на что влияет?

Параметры scrollAmount="3"иonMouseOut="this.scrollAmount=3"влияют на скорость движения текста. Чем больше цифра, тем быстрее бежит текст. В данном случае установлена цифра 3, но мой оптимальный вариант.

Параметры width="400"и height="20" как Вы понимаете это ширина и высота, поля где бежит текст, т.е. Вы можете изменить эти цифры и соотвественно изменятся ширина и высота этого поля.

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

Как Вы заметили, текст бежит справа налево. А если нужно наоборот, слева направо? Тогда используйте код Листинга 2.

Листинг 2.

<marquee behavior="scroll" scrollAmount="3" direction="right" width="400" height="20" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3">
Здесь вставляете текст, который будет отображаться в бегущей строке.
</marquee>

Ниже Вы видите пример работы скрипта, здесь текст бежит слева направо:

Открыт новый раздел: Почтовая Рассылка. Здесь Вы узнаете какую огромную пользу приносит Почтовая Рассылка владельцам сайтов!

В коде Листинга 2, все значения такие же как и в коде Листинга 1, поэтому повторяться не буду.

Как вставить скрипт на сайт? Очень просто, копируете код нужного Вам Листинга, прописываете нужный текст, при необходимости изменяете цифровые значения скорости, ширины и высоты и просто вставляете в то место кода своей web-страницы, где хотите видеть бегущую строку.

Вот и всё. Как видите все очень просто.

 

Всего Вам доброго.

 

Читайте так же:

Как на сайте сделать всплывающую подсказку?

Делаем «каркас» для сайта в программе Dreamweaver.

Как сделать Баннер для Сайта или Блога? Практическое руководство.

Выпустить и опубликовать собственную электронную книгу.

Программы для работы в Интернете и создания сайтов.

Сайт или Блог? На чём можно больше заработать?

 

Просмотров: 48934


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Олег Гузь
Дата: 2011-04-29

Спасибо, Андрей, за интересный скрипт!

Комментарии добавил(а): Алик
Дата: 2011-04-29

Да, с остановкой и ссылкой это здорово! Спасибо

Комментарии добавил(а): Елена
Дата: 2011-04-30

Здравствуйте, Андрей! Спасибо за пост. По вашему образцу, одна строка у меня на сайте уже бежит! Мне нравится. Попробую эту тоже. :)

Комментарии добавил(а): Vladimir
Дата: 2011-05-02

Отличный скрипт. А как сделать, чтобы было как у Вас в разделе "Новости" ?

Комментарии добавил(а): Ольга
Дата: 2011-04-30

Огромное Вам спасибо.У меня получилось.Ура,ура,ура,мы с дочерьми в восторге!!!

Комментарии добавил(а): Евгений
Дата: 2011-04-30

Спасибо, Андрей. Прикольно!!!

Комментарии добавил(а): Сергей
Дата: 2011-05-06

Спасибо.Ваши материалы достойны высшей похвалы.Даже такой чайник как я с успехом применяю их на практике

Комментарии добавил(а): Алексей
Дата: 2011-05-15

у меня сайт на яндекс-народ всё делю как надо 1)написать текст (кнопка) 2) с HTML (КНОПКА) 3) ввожу <marquee behavior="scroll" scrollAmount="3" width="400" height="20" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3"> Здесь вставляем текст, который будет отображаться в бегущей строке. </marquee> 4) изменяю строку где написано "здесь вставляете текст..."(например привет) 5) сохранить (кнопка) и...появляется просто надпись привет ПОМОГИТЕ!

Комментарии добавил(а): Ахмад
Дата: 2011-05-17

Привет Андрей! С уважением к Вам Ахмад. Спасибо Вам за бегущую строку.

Комментарии добавил(а): ynek
Дата: 2011-05-21

на joomla не сохраняется остается только текст сылки

Комментарии добавил(а): Светлана
Дата: 2011-06-28

Андрей спасибо большое за интересную и полезную инфу. Кстати в джумле все прекрасно сохраняется.

Комментарии добавил(а): Наталья
Дата: 2011-10-17

Ура я сделала это!!! Спасибо большое!!!

Комментарии добавил(а): Ольга
Дата: 2011-10-31

Спасибо за полезную инфу.Все получилось отлично. А как размер текста в строке увеличить?Можно подсказать?

Комментарии добавил(а): Александр
Дата: 2011-11-30

Здравствуйте, У меня получается почему-то два текста. Спрева обычный (неподвижный)потом значок "> потом уже эта же бегущая строка. Как быть? А бегущий блок снизу вверх - нормально.

Комментарии добавил(а): АндрейК
Дата: 2011-11-30

Александр, вероятно Вы допустили где то ошибку, не видевши вашего кода что-то определенное сказать трудно.

Комментарии добавил(а): Виталий
Дата: 2011-11-06

Спасибо :)

Комментарии добавил(а): Oleg
Дата: 2011-12-11

Спасибо, просто и сердито

Комментарии добавил(а): Oleg
Дата: 2011-12-11

Один ?, как выставить отступ от нужного края, например 50px от левого края. Заранее спасибо.

Комментарии добавил(а): АндрейК
Дата: 2011-12-11

Олег, проще всего отступы задать с помощью CSS: http://www.luksweb.ru/view_cat.php?cat=2 Создайте отдельный класс и пропишите все необходимые параметры, в том числе и отступ от нужного края

Комментарии добавил(а): Светлана Ковалева
Дата: 2012-01-11

Я установила на боковую панель блога, она 220px, а текст больше по ширине. В результате во всех браузерах отображается нормально, а в IE часть текста обрезано, как раз примерно до 220px. Что добавить в код в данном случае, не подскажете?

Комментарии добавил(а): АндрейК
Дата: 2012-01-11

Светлана, установите параметр ширины (width="400") в 220 пикселей

Комментарии добавил(а): Дмитрий
Дата: 2012-02-05

всем привет! я ещё чайник а куда писать этот код?

Комментарии добавил(а): Andrey
Дата: 2012-02-14

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

Комментарии добавил(а): Юрий
Дата: 2012-01-29

Не работает на Джумле :-(

Комментарии добавил(а): Даниил Певзнер
Дата: 2012-03-16

Урра! Спасибо большое!

Комментарии добавил(а): Людмила
Дата: 2012-04-09

Спасибо большое, но почему-то в эксплорере не видит...?

Комментарии добавил(а): Светлана
Дата: 2012-04-18

Спасибо!!!

Комментарии добавил(а): Андрей
Дата: 2012-05-03

Здравствуйте, подскажите чайнику на джумла вставляю этот код на главной не движется, может сикрет какойто есть? Зарание спасибо.

Комментарии добавил(а): Анастасия
Дата: 2012-08-08

Здравствуйте, у меня бегущая строка состоит из фото. В Microsoft Office FrontPage 2003 в просмотре, она работает! Но, как только я захожу в Google Chrome она так же бежит, но в ней отображаются только верхние 2-3 мм от фото. Как мне это исправить??? Помогите!!!

Комментарии добавил(а): Лариса
Дата: 2012-08-11

Андрей, спасибо за классный урок, простите за глупый вопрос, и не понимаю, где искать в вордпресс код страницы, в которую хочу ставить?

Комментарии добавил(а): Радикал
Дата: 2012-09-10

День добрый, как увеличить шрифт текста?

Комментарии добавил(а): Евгений
Дата: 2012-10-30

Спасибо!

Комментарии добавил(а): Анна Рублева
Дата: 2012-11-09

Присоединяюсь к вопросу с темой ВордПресс Twenty Eleven: куда конкретно вставлять? Вообще, хотелось бы, чтоб бежала срока сразу под шапкой сайта. Пока получилось вставить только над текстом статей на страницах (а это не то, что нужно). И еще вопрос: как так у меня получается, что строка выдает не весь текст, который в нее впихнули? Вот код: <marquee behavior="scroll" scrollAmount="8" width="600" height="90" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=8"> <strong><span style="color: #940f04;">ЗДЕСЬ МОЙ ТЕКСТ </span> <span style="color: #fb590e;">ЗДЕСЬ МОЙ АДРЕС anna_rubleva@mail.ru</span></strong> </marquee> Спасибо! Очень ждем ответа!

Комментарии добавил(а): Егор
Дата: 2012-11-20

что за листинг скажите пожалусто

Комментарии добавил(а): АндрейК
Дата: 2012-11-21

Егор, "Листинг" - это участок кода, который вставляется в код осноной web-страницы, смотрите выше

Комментарии добавил(а): nikgelo
Дата: 2012-12-15

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

Комментарии добавил(а): Николай
Дата: 2013-01-23

Скажите пожалуйста как увеличить шрифт

Комментарии добавил(а): Анна
Дата: 2013-01-29

Попробую, очень интересно!

Комментарии добавил(а): Вячеслав
Дата: 2013-02-10

Для увеличения шрифта сделать следующее <font size="3">Здесь вставляем текст, который будет отображаться в бегущей строке.</font> Где "" цифры могут быть от 1 до 5, в моем случает сейчас 3

Комментарии добавил(а): олег
Дата: 2013-02-16

Огромное спасибо за бег.строку.Просто и удобно!

Комментарии добавил(а): Юлия
Дата: 2013-04-20

спасибо большое =) очень круто когда что-то объясняют,ты делаешь и все работает)) еее))

Комментарии добавил(а): Сергей
Дата: 2013-04-30

Спасибо! Очень забавно.

Комментарии добавил(а): Геннадий
Дата: 2013-06-20

Спасибо за урок! А как изменить цвет шрита в бегущей строке?

Комментарии добавил(а): Константин
Дата: 2013-08-01

Скажите а как правильно просисать цвет и размер текста одновременно в одном контейнере,а то выходит только одно или то или другое вот пример : <marquee direction="up"onmouseout="this.start()"onmouseover="this.stop()"style="font-size:2px"style="color:#000000"width="40px" height="30px"scrollamount="1">Почему здесь не работает цвет и размер шрифта одновременно</marquee>

Комментарии добавил(а): Оле
Дата: 2013-07-29

Спасибо за пост)))

Комментарии добавил(а): Елена
Дата: 2013-07-08

А на "джумле"работать такое будет?

Комментарии добавил(а): АндрейК
Дата: 2013-07-09

Да, в Джумле скрипт "Бегущая строка" работает без проблем

Комментарии добавил(а): Артем
Дата: 2013-07-26

Спасибо за урок!

Комментарии добавил(а): Людмила
Дата: 2013-07-23

Очень нужна такая строка для клуба но не получаеися на Яедексе Помогите

Комментарии добавил(а): иван
Дата: 2014-01-09

Спасибо Андрей! Пусть все пожелания(и моё в том числе)материализуются в твоё хорошее настроение.Твой сайт палочка-выручалочка начинающим сайтостроителям.Скрипты с пояснениями вообще клад.Спасибо.

Комментарии добавил(а): Тазалия
Дата: 2014-02-15

с HTML ввожу скрипт и свой текст,а появляется только текст. Строка не бежит. Прошу помочь!

Комментарии добавил(а): Miasta.ru
Дата: 2014-03-05

Все отлично работает пример можно посмотреть на miasta.ru

Комментарии добавил(а): Светлана
Дата: 2014-03-26

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

Комментарии добавил(а): Нурылла
Дата: 2014-07-14

наш сайт kkaetk.uz я хочу создать бегущая страка прашу дайте совет или помощ мой почта jollibaev86@mail.ru

Комментарии добавил(а): Людмила
Дата: 2015-02-21

Скажите а как правильно прописать цвет и размер текста ?? Да и спасибо!!! у меня все работает!!

Комментарии добавил(а): АндрейК
Дата: 2015-02-22

Людмила, посмотрите про цвет и размер здесь: http://www.luksweb.ru/view_post.php?id=7

Комментарии добавил(а): Дмитрий
Дата: 2015-03-01

А есть ли для Google Chrome расширение типа бегущей строки RSS ? Наподобие как у Firefox - RSS Ticker.

Комментарии добавил(а): Владимир
Дата: 2015-10-25

Очень хороший пост и полезная информация. Автору большое спасибо !!!

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT