/ Ваше разрешение экрана: px / Ваш Ip адрес: {ip}

Shop Scripts

Бегущая строка

3-06-2018, 16:46

Несколько версий отображения бегущей строке на страницах сайта -
информационная и строка-ссылка.

 

Простая Бегущая строка со ссылкой

Значение scrollamount="2" - скорость ротации символов.

<!-- Начало "бегущей строки" -->
<marquee direction="left" scrollamount="2" scrolldelay="10">
<a href="http://hi-cd.by" >
<strong>Ваш Текст</strong>
</a></marquee>
<!-- Конец "бегущей строки" -->

 

Стильная Бегущая строка со ссылкой

<!-- Начало "бегущей строки" -->
<table style="background: rgb(0, 0, 0) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="1" cellpadding="0" cellspacing="0" height="11">
<tbody>
<tr>
<td style="background: rgb(0, 0, 0) none no-repeat scroll center center; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<marquee style="color: rgb(0, 0, 0);" width="100%">
<a href="http://hi-cd.by">
<font color="#00ff00"><b>Ваш текст.</b></font>
</marquee></a></td>
</tr></tbody></table>
<!-- Конец "бегущей строки" -->

 

Стильная Бегущая строка информационная

<!-- Начало "бегущей строки" -->
<table style="background: rgb(0, 0, 0) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="1" cellpadding="0" cellspacing="0" height="11">
<tbody>
<tr>
<td style="background: rgb(0, 0, 0) none no-repeat scroll center center; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<marquee style="color: rgb(0, 0, 0);" width="100%">
<font color="#00ff00"><b>Ваш текст.</b></font>
</marquee></td>
</tr></tbody></table>
<!-- Конец "бегущей строки" -->

Простая Бегущая строка на jQuery

Простая реализация на jQuery бегущей текстовой строки. Мы лишь слегка оформили задний фон с помощью css3 градиента.
HTML разметка

<div class="string">
<div id="marquee">Строка с бегущим текстом для показа какого-нибудь важного объявления на сайте.</div>
</div>
CSS 
Стиль вообще не обязателен.
.string{
    width:600px;
    height:30px;
    margin:60px auto;
    line-height:28px;
    padding: 0 10px;
    border-radius:4px;
    box-shadow:0 1px 2px #777;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    background: rgb(238,238,238);
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
}
В хедере подключаем библиотеку jQuery и вызываем скрипт:
$(function() {
    var marquee = $("#marquee"); 
    marquee.css({"overflow": "hidden", "width": "100%"});
    // оболочка для текста ввиде span (IE не любит дивы с inline-block)
    marquee.wrapInner("<span>");
    marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
    marquee.append(marquee.find("span").clone()); // тут у нас два span с текстом
    marquee.wrapInner("<div>");
    marquee.find("div").css("width", "200%");
    var reset = function() {
        $(this).css("margin-left", "0%");
        $(this).animate({ "margin-left": "-100%" }, 12000, 'linear', reset);
    };
    reset.call(marquee.find("div"));
});


Нашли ошибку? / Метки к статье: бегущая строка
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Рекомендуем Вам зарегистрироваться или войти на сайт под своим логином, чтобы полноправно пользоваться сайтом и иметь доступ ко всем материалам.
Категория: Текстовые эффекты

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

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Докажите, что Вы не Робот: *
Это интересно
Поиск и оплата штрафов ГИБДД/Налогов/Исполнительных производств
Новости Портала

Николай Савельев - Взаимоотношения полов. Основы

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

Экспресс-курс Рост продаж через контент (2019) PCRec

Небольшой курс в котором затронуты аспекты создания продающего контента. Состоит из 7-ми видео уроков, длительностью не более 30 минут каждый, также прилагаются домашние задания. За это время у вас ...

Супер Illustrator (2018) HD

Самый полный обучающий курс по созданию векторной графики в программе Adobe Illustrator. В курсе детально рассматриваются все возможности и инструменты программы Adobe Illustrator с самого нуля до ...
Реклама Партнеров
Поддержите проект
Статистика

 
Скрипт социальных кнопок