Скрипт бегущая строка

imegesБегущая строка на сайте очень полезная вещь и может пригодится в разных ситуациях. Например когда есть не преодолимое желание вставить на страничке сайта какой то текст или рекламу но охота так же сэкономить место. Вот тут то как раз и поможет вставка бегущей строки. Ведь в бегущую  строку можно вставлять не только текст но и картинки и таблицы. Тем более для создания бегущей строки вам не потребуется устанавливать дополнительные компоненты, модули или плагины. Для создания бегущей строки вам нужно просто написать обычный код и  вставить в нужное место статьи или html модуля. В этой статье я расскажу вам как это можно сделать и дам исходники для такого кода. И так приступим. Сразу скажу, что если вы будите создавать бегущую строку вне статьи, то вам нужно будет просто вставить тот же код в HTML модуль для вставки кода лучше всего использовать редактор для joomla  jckeditor3.4.6  этот редактор не режет код и работает корректно не только с скриптами но и с видео, скачать его можно здесь ( в арзиве находятся ещё три архива сам редактор 3.4.7, обновление до версии 3.4.7 и обновление до версии 3.4.7.1  вам нужно разархиваровать скачаный орхив и установить по порядку сначала сам редактор plg_jckeditor3.4.7 а затем обновление. ), а прочитать про настройки и как установить можно в статье Визуальный редактор JoomlaCK

Для того что бы вставить вот такую бегущую строку,

 

Пример бегущей строки.

 

в нужное место статьи или иросто страници вам нужно вставить вот такой код

<center>
    <marquee behavior="scroll" bgcolor="aqua" direction="left" height="50" loop="infinite" width="500">
    <h2>
        Пример бегущей строки.</h2>
    </marquee></center>

 

Как я уже упоминал раньше в эту строку можно вставлять не толь текст, но так же и картинки. А еще ее можно настраивать по своему усмотрению, так как вам нежно

 

Другой пример бегущей строки

 

 

Пример берущей строки.

Пример берущей строки.

Пример берущей строки.

Пример берущей строки.

Пример берущей строки.

Пример берущей строки.

 

 

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

Разъяснение кода бегущей строки.

Бегущая строка создаётся с помощью контейнера тэгов <marquee>...</marquee> со следующими атрибутами:
width="..." - ширина бегущей строки в пикселях или процентах от ширины экрана.
height="..." - высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
bgcolor="..." - определяет цвет фона бегущей строки.
behavior="..." задает тип движения (поведение) бегущей строки и имеет следующие значения:
scroll - циклическая прокрутка текста из одного конца в другой
slide - текст появляется с одного края и останавливается у другого.  
alternate - текст перемещается от одного края к другому и обратно.  
direction="..." - определяет направление движения бегущей строки. Имеет следующие значения:
left - текст движется влево по строке
right - текст движется вправо по строке
up - вся строка перемещается снизу вверх
down - строка движется сверху вниз
scrollamount="..." - шаг перемещения в строке в пикселах, на который перемещается текст за заданный интервал времени. Например:   - scrollamount="1"   - scrollamount="2"   - scrollamount="2"
scrolldelay="..."
- Этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах. Например:   - scrolldelay="100"   - scrolldelay="200"   - scrolldelay="300"
loop="..." - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.
hspace="..." - Этот атрибут задает поле в пикселах справа и слева от бегущей строки.   - hspace="10"   - hspace="0"
vspace="..." - Этот атрибут задает отступ в пикселах выше и ниже бегущей строки.   - hspace="0"   - hspace="10"
Ниже приведен пример кода для бегущей строки размеро 50 пикселей в высоту и 250 пикселей в ширину. Определена бесконечная прокрутка текста, текст перемещается слева направо и имеет ярко-голубом фоне.


<marquee loop="infinite" behavior="altemate"
        bgcolor="aqua" direction="right" height="50" width="250">
Пример берущей строки.
</marquee>


А так же можно добавить приведённый ниже код тогда бегущая строка будит реагировать на курсор мышки и останавливать движение при наведении на ее курсором.

 

Пример бегущей строки.

 

onMouseOver="this.scrollAmount=0"

onMouseOut="this.scrollAmount=3"
Остановка при наведении курсора и пуск при убирании курсора.
Пример
<marquee behavior="scroll" scrollAmount="3" width="" height="" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3">текст бегущей строки или теги картинок</marquee>

 

 

Так же к этой статье был написан комментарий и задан вопрос:

# tamga 19.01.2013 09:19

Спасибо, прикольный урок. А есть у Вас на js чтото похожее?

 

  Я здесь пока решил добавить простой скрипт бегущей строки на JavaScript, и небольшое пояснение к этому скрипту. (Это скрипт писал не я, я его просто нашел в интернете. Но он работает.)

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

Простой код бегущей строки на JavaScript.

 

Часть скрипта которую вы размещаете между тегами (<head>………</head>) или в отдельном файле js подключенном к шаблону или странице сайта.

 

 

 

<SCRIPT LANGUAGE='JavaScript'>
function outmsg(msg,ctrlwidth)
{
   msg = " --- "+msg
   newmsg = msg
   while (newmsg.length < ctrlwidth) {newmsg += msg}
   document.write ('<FORM NAME="Outmsg">')
   document.write ('<CENTER><INPUT NAME="outmsg" VALUE= "'+newmsg+'" SIZE= '+ctrlwidth+'></CENTER>')
   document.write ('</FORM>')
   rollmsg()
}
function rollmsg()
{
   NowMsg=document.Outmsg.outmsg.value
   NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)
   document.Outmsg.outmsg.value = NowMsg
   bannerid=setTimeout("rollmsg()",100)
}
</SCRIPT>

 

 

 

Скрипт который нужно поместить в месте где должна отображаться сама бегущая строка

 

 

<SCRIPT language='JavaScript'>
   outmsg("Вы видите строку! Она бежит! УРА!!!",70)
</script>

 

Посмотреть пример этой строки в работе.

 

Небольшое пояснение к коду.

 

 1.Функция outmsg() которая имеет

Два параметра:
      - msg –текст бегущей строки для вывода циклически,
      - ctrlwidth - ширина поля вывода в символах.
   Здесь в коде к тексту msg добавлены слева символы --- , просто для того что бы не сливался в один текст, следующей и предыдущей строки.
   В переменную newmsg запишем непрерывную последовательность из ctrlwidth экземпляров текста msg.
    В форме Outmsg определяем текстовую переменную outmsg длиной ctrlwidth символов и с начальным значением newmsg.
   Вызываем программу прокрутки rollmsg().
2. Функция rollmsg() выполняет следующие действия:
       - Записать в newmsg текущее содержимое строки текста,
       - Самый первый символ текста переставляем в конец(здесь и достигается эффект прокрутки ,
        - Полученный текст пересылается назад, в форму.
       - Функция setTimeout("rollmsg()",100) выполняет задержку функции rollmsg с интервалом в 100 миллисекунд.
3. Вызываем функцию outmsg с соответствующими параметрами.

 

Так же добавляю еще несколько примеров бегущей строки на Java script.

______________________________________

Пример №2

Посмотреть

Скачать.

____________________________________________

Пример №3

Посмотреть 

Скачать

__________________________________________

Комментарии

 
# tamga 19.01.2013 09:19
Спасибо, прикольный урок. А есть у Вас на js чтото похожее?
 
 
# davydovdima 11.04.2013 23:03
Здравствуйте, а как сделать так чтобы новости в бегущей строке отображались по очереди, с разрывом в ширину строки???
 
 
# Админ. 12.04.2013 16:12
Цитирую davydovdima:
Здравствуйте, а как сделать так чтобы новости в бегущей строке отображались по очереди, с разрывом в ширину строки???

Добавил в статью еще пару примеров бегущей строки на JS. Попробуйте подобрать что то и поэкспериментир уйте с параметрами настройки.
 
 
# pikasso 27.04.2013 15:43
уроки интересные и полезные - но есть одно но... я лично несмог подобрать обработчик стилей для бегущей строки.
 
 
# ЛОЛ 06.06.2013 10:07
Добавил себе на сайт, всё нормально.
 
 
# Aleks 06.07.2013 21:10
Быстро нашли - быстро добавили = Всё отлично работает!
Спасибо!

С уважением к Вам и Вашему Делу!
DrNona-Company.Ru
Dr.Nona - Сообщество Независимых Потребителей
 
 
# Дима 27.09.2013 09:38
Примеры и описание - супер!
 
 
# Дима 27.09.2013 10:35
Здравствуйте!
С бегущей строкой на сайте происходит что-то непонятное. В браузере Mozilla - все отлично работает. А вот в браузере Opera v12.16 - бегущая строка работает только на один раз (т.е. нет цикличности - бегущая строка проходит и больше не появляется, появляется только если обновить страницу).
 
 
# Админ. 28.09.2013 19:12
Здравствуйте Дима. Про какой именно пример бегущей строки идет речь? У меня стоит Opera 15.0. Те варианты которые представнены на этой странице в Opera 15.0 работают без проблем. Я не исключаю, что в каком то браузере может что то не работать, но разбираться нужно отдельно именно для определенного браузера и кода... Попробуйте задать такой вопрос на форуме или поискать ответ в интернете, может кто то уже сталкивался с такой проблемой...
 
 
# гоша 11.10.2013 12:23
Как сделать чтобы бегущая строка бежала непрерывно без пробелов,остана вливалась при наведении курсора,отображ ала как текст ,так и картинки,ссылки или теги iframe
 
 
# Любовь 06.01.2014 08:13
Рада знакомству с Вами и с вашим сайтом Подскажите Где найти ,каак вставить эту симатягу птичку и снехжинки ? За ранее Благодарю !!! С наступающим Рождеством !!!
 
 
# Админ. 06.01.2014 18:07
Спасибо вам Любовь за поздравлений. Вас так же с рождеством! Эти снежинки и птичка, это просто расширения для joomla снежинки это плагин "Floating Particles", а птичка это модуль "mod_jtwitter". Это не мои расширения и ставил я их уже давно, а теперь просто включаю когда нужно. Поэтому не помню где я и у кого их скачивал, скажу только что они бесплатные были, поэтому можете найти их через поиск гугла и скачать... Устанавливаются они стандартным образом поэтому я думаю, что объяснять как установить плагин или модуль, не нужно... Если будут вопросы напишите мне через страницу "обратная связь" я постараюсь помочь...
 
 
# Миронов Александр 24.02.2014 14:31
День добрый. Скажите пожалуйста как сделать так, чтобы бегущая строка из примера №3 бежала сверху вниз (мне нужно изображения гонять). просто это единственный вариант, где строка двигается плавно,а не рывками.
 
 
# Lara 15.07.2014 12:39
Добрый день, подскажите, как в джумла сделать бегущую строку из картинок, но, чтобы эта строка была зациклена, т.е, при исчезновении одной картинки появлялась другая, после исчезновения другой появлялась первая и так постоянно.
 
 
# Админ. 15.07.2014 13:01
Цитирую Lara:
Добрый день, подскажите, как в джумла сделать бегущую строку из картинок, но, чтобы эта строка была зациклена, т.е, при исчезновении одной картинки появлялась другая, после исчезновения другой появлялась первая и так постоянно.

Здравствуйте. На сколько я понял вам нужна не бегущая строка, а слайдер картинок. Скриптов слайдера картинок у меня на сайте нет, но вы можите найти их в нете, их очень много разных выложено. А для joomla должны быть и такие модули. Я обязательно добавлю страницу где это будет написано, а пока поищите просто на других сайтах.
Так же можите использовать, если подойдет альбом, с эфектом перелистования. Очень интересный эфект полочается.
http://businessumcha.com/home/video-uroki/159-perelistivanie.html
 

Обсуждение этой темы закрыто.

 

 

 

Custom Search

 

 

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

Отправить в FacebookОтправить в Google BookmarksОтправить в TwitterОтправить в LinkedInОтправить в BobrdobrОтправить в LivejournalОтправить в MoymirОтправить в OdnoklassnikiОтправить в VkcomОтправить в Yaru