Как сделать на сайте Бегущую Строку.
Автор: Андрей Краснокутский
Дата: 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.
Как сделать Баннер для Сайта или Блога? Практическое руководство.
Выпустить и опубликовать собственную электронную книгу.
Программы для работы в Интернете и создания сайтов.
Сайт или Блог? На чём можно больше заработать?
Просмотров: 55569
Спасибо, Андрей, за интересный скрипт!
Да, с остановкой и ссылкой это здорово! Спасибо
Здравствуйте, Андрей! Спасибо за пост. По вашему образцу, одна строка у меня на сайте уже бежит! Мне нравится. Попробую эту тоже. :)
Отличный скрипт. А как сделать, чтобы было как у Вас в разделе "Новости" ?
Огромное Вам спасибо.У меня получилось.Ура,ура,ура,мы с дочерьми в восторге!!!
Спасибо, Андрей. Прикольно!!!
Спасибо.Ваши материалы достойны высшей похвалы.Даже такой чайник как я с успехом применяю их на практике
у меня сайт на яндекс-народ всё делю как надо
1)написать текст (кнопка)
2) с HTML (КНОПКА)
3) ввожу <marquee behavior="scroll" scrollAmount="3" width="400" height="20" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3">
Здесь вставляем текст, который будет отображаться в бегущей строке.
</marquee>
4) изменяю строку где написано "здесь вставляете текст..."(например привет)
5) сохранить (кнопка)
и...появляется просто надпись привет
ПОМОГИТЕ!
Привет Андрей! С уважением к Вам Ахмад. Спасибо Вам за бегущую строку.
на joomla не сохраняется остается только текст сылки
Андрей спасибо большое за интересную и полезную инфу. Кстати в джумле все прекрасно сохраняется.
Ура я сделала это!!! Спасибо большое!!!
Спасибо за полезную инфу.Все получилось отлично. А как размер текста в строке увеличить?Можно подсказать?
Здравствуйте,
У меня получается почему-то два текста. Спрева обычный (неподвижный)потом значок "> потом уже эта же бегущая строка. Как быть?
А бегущий блок снизу вверх - нормально.
Александр, вероятно Вы допустили где то ошибку, не видевши вашего кода что-то определенное сказать трудно.
Спасибо, просто и сердито
Один ?, как выставить отступ от нужного края,
например 50px от левого края. Заранее спасибо.
Олег, проще всего отступы задать с помощью CSS: http://www.luksweb.ru/view_cat.php?cat=2
Создайте отдельный класс и пропишите все необходимые параметры, в том числе и отступ от нужного края
Я установила на боковую панель блога, она 220px, а текст больше по ширине. В результате во всех браузерах отображается нормально, а в IE часть текста обрезано, как раз примерно до 220px. Что добавить в код в данном случае, не подскажете?
Светлана, установите параметр ширины (width="400") в 220 пикселей
всем привет! я ещё чайник а куда писать этот код?
Спасибо за скрипт. А как можно доработать его что бы бегущая информация чередовалась. К примеру есть три предложения, чтобы пробегало сначала первое до конца, потом второе и т.д.?
Не работает на Джумле :-(
Спасибо большое, но почему-то в эксплорере не видит...?
Здравствуйте, подскажите чайнику на джумла вставляю этот код на главной не движется, может сикрет какойто есть?
Зарание спасибо.
Здравствуйте, у меня бегущая строка состоит из фото. В Microsoft Office FrontPage 2003 в просмотре, она работает! Но, как только я захожу в Google Chrome она так же бежит, но в ней отображаются только верхние 2-3 мм от фото. Как мне это исправить??? Помогите!!!
Андрей, спасибо за классный урок, простите за глупый вопрос, и не понимаю, где искать в вордпресс код страницы, в которую хочу ставить?
День добрый, как увеличить шрифт текста?
Присоединяюсь к вопросу с темой ВордПресс 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>
Спасибо! Очень ждем ответа!
что за листинг скажите пожалусто
Егор, "Листинг" - это участок кода, который вставляется в код осноной web-страницы, смотрите выше
Доброго времени суток.Как сделать так,чтобы в бегущей строке заканчиволось одно предложение,делался некоторый пропуск и дальше шло другое предложение.
Скажите пожалуйста как увеличить шрифт
Попробую, очень интересно!
Для увеличения шрифта сделать следующее <font size="3">Здесь вставляем текст, который будет отображаться в бегущей строке.</font>
Где "" цифры могут быть от 1 до 5, в моем случает сейчас 3
Огромное спасибо за бег.строку.Просто и удобно!
спасибо большое =) очень круто когда что-то объясняют,ты делаешь и все работает)) еее))
Спасибо за урок! А как изменить цвет шрита в бегущей строке?
Скажите а как правильно просисать цвет и размер текста одновременно в одном контейнере,а то выходит только одно или то или другое вот пример :
<marquee direction="up"onmouseout="this.start()"onmouseover="this.stop()"style="font-size:2px"style="color:#000000"width="40px" height="30px"scrollamount="1">Почему здесь не работает цвет и размер шрифта одновременно</marquee>
А на "джумле"работать такое будет?
Да, в Джумле скрипт "Бегущая строка" работает без проблем
Очень нужна такая строка для клуба но не получаеися на Яедексе Помогите
Спасибо Андрей! Пусть все пожелания(и моё в том числе)материализуются в твоё хорошее настроение.Твой сайт палочка-выручалочка начинающим сайтостроителям.Скрипты с пояснениями вообще клад.Спасибо.
с HTML ввожу скрипт и свой текст,а появляется только текст. Строка не бежит. Прошу помочь!
Все отлично работает пример можно посмотреть на miasta.ru
Андрей! Спасибо Вам впервые на сайте вашем, много ценного, хотела оформить подписку, но форма временно не работает, загляну позже.
Я совсем уж чайник, но один к одному готовый скрипт размещать не интересно, вникаю, меняю, размещаю. Спасибо.
наш сайт kkaetk.uz я хочу создать бегущая страка прашу дайте совет или помощ
мой почта jollibaev86@mail.ru
Скажите а как правильно прописать цвет и размер текста ?? Да и спасибо!!! у меня все работает!!
Людмила, посмотрите про цвет и размер здесь: http://www.luksweb.ru/view_post.php?id=7
А есть ли для Google Chrome расширение типа бегущей строки RSS ?
Наподобие как у Firefox - RSS Ticker.
Очень хороший пост и полезная информация. Автору большое спасибо !!!
Спасибо все просто без заморочек и работает.
|