|
|
|
|
Как сделать на сайте Бегущую Строку. Автор: Андрей Краснокутский Дата: 2011-04-29 Скрипт для сайта: Бегущая строка.Сегодня мы рассмотрим новый скрипт для сайта: Бегущая строка. При наведении мыши на бегущий текст, строка останавливается. Ниже приведен пример работы скрипта:
Теперь смотрим код скрипта, приведен в Листинге 1: Листинг 1.
Теперь давайте разбираться с листингом, а также посмотрим, что здесь Вам можно изменять и что на что влияет? Параметры scrollAmount="3"иonMouseOut="this.scrollAmount=3"влияют на скорость движения текста. Чем больше цифра, тем быстрее бежит текст. В данном случае установлена цифра 3, но мой оптимальный вариант. Параметры width="400"и height="20" как Вы понимаете это ширина и высота, поля где бежит текст, т.е. Вы можете изменить эти цифры и соотвественно изменятся ширина и высота этого поля. В коде вместо словЗдесь вставляем текст, который будет отображаться в бегущей строкепрописываете текст, который нужен Вам и форматирует его нужным образом. Как Вы заметили, текст бежит справа налево. А если нужно наоборот, слева направо? Тогда используйте код Листинга 2. Листинг 2.
Ниже Вы видите пример работы скрипта, здесь текст бежит слева направо:
В коде Листинга 2, все значения такие же как и в коде Листинга 1, поэтому повторяться не буду. Как вставить скрипт на сайт? Очень просто, копируете код нужного Вам Листинга, прописываете нужный текст, при необходимости изменяете цифровые значения скорости, ширины и высоты и просто вставляете в то место кода своей web-страницы, где хотите видеть бегущую строку. Вот и всё. Как видите все очень просто.
Всего Вам доброго.
Читайте так же: Как на сайте сделать всплывающую подсказку? Делаем «каркас» для сайта в программе Dreamweaver. Как сделать Баннер для Сайта или Блога? Практическое руководство. Выпустить и опубликовать собственную электронную книгу. Программы для работы в Интернете и создания сайтов. Сайт или Блог? На чём можно больше заработать?
Просмотров: 54618 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Олег Гузь Спасибо, Андрей, за интересный скрипт! Комментарии добавил(а): Алик Да, с остановкой и ссылкой это здорово! Спасибо Комментарии добавил(а): Елена Здравствуйте, Андрей! Спасибо за пост. По вашему образцу, одна строка у меня на сайте уже бежит! Мне нравится. Попробую эту тоже. :) Комментарии добавил(а): Vladimir Отличный скрипт. А как сделать, чтобы было как у Вас в разделе "Новости" ? Комментарии добавил(а): Ольга Огромное Вам спасибо.У меня получилось.Ура,ура,ура,мы с дочерьми в восторге!!! Комментарии добавил(а): Евгений Спасибо, Андрей. Прикольно!!! Комментарии добавил(а): Сергей Спасибо.Ваши материалы достойны высшей похвалы.Даже такой чайник как я с успехом применяю их на практике Комментарии добавил(а): Алексей у меня сайт на яндекс-народ всё делю как надо 1)написать текст (кнопка) 2) с HTML (КНОПКА) 3) ввожу <marquee behavior="scroll" scrollAmount="3" width="400" height="20" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3"> Здесь вставляем текст, который будет отображаться в бегущей строке. </marquee> 4) изменяю строку где написано "здесь вставляете текст..."(например привет) 5) сохранить (кнопка) и...появляется просто надпись привет ПОМОГИТЕ! Комментарии добавил(а): Ахмад Привет Андрей! С уважением к Вам Ахмад. Спасибо Вам за бегущую строку. Комментарии добавил(а): ynek на joomla не сохраняется остается только текст сылки Комментарии добавил(а): Светлана Андрей спасибо большое за интересную и полезную инфу. Кстати в джумле все прекрасно сохраняется. Комментарии добавил(а): Наталья Ура я сделала это!!! Спасибо большое!!! Комментарии добавил(а): Ольга Спасибо за полезную инфу.Все получилось отлично. А как размер текста в строке увеличить?Можно подсказать? Комментарии добавил(а): Александр Здравствуйте, У меня получается почему-то два текста. Спрева обычный (неподвижный)потом значок "> потом уже эта же бегущая строка. Как быть? А бегущий блок снизу вверх - нормально. Комментарии добавил(а): АндрейК Александр, вероятно Вы допустили где то ошибку, не видевши вашего кода что-то определенное сказать трудно. Комментарии добавил(а): Виталий Спасибо :) Комментарии добавил(а): Oleg Спасибо, просто и сердито Комментарии добавил(а): Oleg Один ?, как выставить отступ от нужного края, например 50px от левого края. Заранее спасибо. Комментарии добавил(а): АндрейК Олег, проще всего отступы задать с помощью CSS: http://www.luksweb.ru/view_cat.php?cat=2 Создайте отдельный класс и пропишите все необходимые параметры, в том числе и отступ от нужного края Комментарии добавил(а): Светлана Ковалева Я установила на боковую панель блога, она 220px, а текст больше по ширине. В результате во всех браузерах отображается нормально, а в IE часть текста обрезано, как раз примерно до 220px. Что добавить в код в данном случае, не подскажете? Комментарии добавил(а): АндрейК Светлана, установите параметр ширины (width="400") в 220 пикселей Комментарии добавил(а): Дмитрий всем привет! я ещё чайник а куда писать этот код? Комментарии добавил(а): Andrey Спасибо за скрипт. А как можно доработать его что бы бегущая информация чередовалась. К примеру есть три предложения, чтобы пробегало сначала первое до конца, потом второе и т.д.? Комментарии добавил(а): Юрий Не работает на Джумле :-( Комментарии добавил(а): Даниил Певзнер Урра! Спасибо большое! Комментарии добавил(а): Людмила Спасибо большое, но почему-то в эксплорере не видит...? Комментарии добавил(а): Светлана Спасибо!!! Комментарии добавил(а): Андрей Здравствуйте, подскажите чайнику на джумла вставляю этот код на главной не движется, может сикрет какойто есть? Зарание спасибо. Комментарии добавил(а): Анастасия Здравствуйте, у меня бегущая строка состоит из фото. В 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-страницы, смотрите выше Комментарии добавил(а): nikgelo Доброго времени суток.Как сделать так,чтобы в бегущей строке заканчиволось одно предложение,делался некоторый пропуск и дальше шло другое предложение. Комментарии добавил(а): Николай Скажите пожалуйста как увеличить шрифт Комментарии добавил(а): Анна Попробую, очень интересно! Комментарии добавил(а): Вячеслав Для увеличения шрифта сделать следующее <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 Все отлично работает пример можно посмотреть на miasta.ru Комментарии добавил(а): Светлана Андрей! Спасибо Вам впервые на сайте вашем, много ценного, хотела оформить подписку, но форма временно не работает, загляну позже. Я совсем уж чайник, но один к одному готовый скрипт размещать не интересно, вникаю, меняю, размещаю. Спасибо. Комментарии добавил(а): Нурылла наш сайт kkaetk.uz я хочу создать бегущая страка прашу дайте совет или помощ мой почта jollibaev86@mail.ru Комментарии добавил(а): Людмила Скажите а как правильно прописать цвет и размер текста ?? Да и спасибо!!! у меня все работает!! Комментарии добавил(а): АндрейК Людмила, посмотрите про цвет и размер здесь: http://www.luksweb.ru/view_post.php?id=7 Комментарии добавил(а): Дмитрий А есть ли для Google Chrome расширение типа бегущей строки RSS ? Наподобие как у Firefox - RSS Ticker. Комментарии добавил(а): Владимир Очень хороший пост и полезная информация. Автору большое спасибо !!! Добавить Ваш комментарий: |
Новости сайта Почтовая рассылка Новинка! Как реально заработатьв Интернете? "Обзор видов и способов заработка."
Специальный Отчет:  В подарок всем подписчикам! Полный список наших почтовых рассылок! Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
Как видите текст в бегущей строке можно редактировать: изменять цвет, делать жирным, придавать ему различные стили, т.е. это обычный текст и соответственно на него распространяются все 
|
Разрешается полное или частичное копирование материалов сайта с обязательным |