Бегущая строка на jQuery c прокруткой текста
Бегущая строка является, наверное, одним из первых и наиболее старым динамическим эффектом для сайта, поэтому в интернете можно найти много различных версий этого эффекта. Но я, все же, хочу познакомить вас с моей версией этого плагина сделанного с помощью jQuery.
Пример бегущей строки:
Вы можете открыть пример в новом окне.
Что же есть интересного в моей версии плагина? Перечислю для вас некоторые моменты.
- нициализация множества строк на одной страницы разной длины текста и ширины поля.
- Возможность прокрутки текста с помощью колесика мышки в различных направлениях
- зменения стиля отображения бегущей строки при наведении
- наиболее важный момент – легкость подключения
Детальнее по коду примера:
CSS
width:600px;
overflow:hidden;
}
div.move {
overflow:hidden;
width:99999px;
}
.news p {
float:left;
margin:0;
}
HTML
<div class="bg">
<div class="move">
<p>
Плагин "Бегущая строка". Версия 1.1.0. Разработано ...
</p>
</div>
</div>
</div>
div с классом news выступает в роли главной обертки для бегущей строки, именно на этот объект ссылается скрипт, для него мы указываем ширину и overflow:hidden. div.bg – выступает только в роли контейнера для background и не имеет никакой роли для скрипта, за исключением следующего элемента div.move, этот элемент является основным для скрипта, т.к. именно его со всеми внутренностями будет двигать скрипт, и для того чтобы текст внутри не переносился мы задаем ему большую длину. Внутри находится тег P который будет клонироваться, поэтому для этого элемента является обязательным свойство float.
Детальнее по скрипту:
<script type="text/javascript" src="js/jquery.crawlLine.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.news').crawlLine({
speed:2,
crawElement:'div', // для примера div.move
textElement:'p',
hoverClass:'viewText'
});
});
</script>
Параметры:
- speed – скорость прокрутки текста (1, 2, 3 …)
- crawElement – элемент прокрутки
- textElement – текстовый элемент (для клонирования)
- hoverClass – класс добавляемый при наведении мышки
Буду рад если кому-то пригодится данный плагин :)
Cкачать плагин
60 Коментариев to Бегущая строка на jQuery c прокруткой текста
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
В джумле по умолчанию используется mootools, скорее всего из-за него у вас конфликт. Пропишите для jQuery noConflict
Привет. Не работает, если в нутри яваскрипт. можно как-то поправить?
пардон, к примеру кнопочка счетчика =)
вообще скрипт на это не расчитан, но поидее должно работать если запускать сначало срипт для сетчика а потом инициализировать бегущую строку.
Отличный плагин ! Вашим плагином выпадающего меню тоже пользуюсь. Спасибо !
Ну всё хорошо ! , как в кино, … а с перламутровыми пуговицами есть …? Нужна бегушка, которая висит” перед глазами постоянно и не стартует сначала после открытия новой страницы, а продолжает свой бег. Можешь такое написать ?
Есть огромнейшая проблема, у строки есть максимальный размер ):
Я поставил Вашу замечательную строку на свой сайт. У меня почему-то о IE8 со строкой всё нормально, а вот в Opera10 перед появлением текста проходит секунд 10-11. Причём, это только у меня на сайте. На Вашем блоге строка правильно во всех браузерах работает.
Почему это может быть?
Забыл упомянуть, что я сократил ширину до 350px, чтобы вписывалось на моём сайте в дизайн. вот после этого началось
в строке 61 должна быть _el.stop();
Разве нет?
В IE6-IE7 не корректно работает, текст вылезает за границы блока.
собственно костыль для IE6-IE7
в класс .news дописываем position:relative;
спасибо скрипт пригодился,щас успешно работает на сайте
не работает вместе с lightbox скриптом
сразу конфликт после подключения prototype.js и
jquery-1.3.2.min.js… что выше стоит то и работает
Добрый день! Плагин супер, спасибо огромное… не могу только понять почему в опере строка дублируется? буду признателен если подскажете в чем дело….
Данный джс кроссбраузерный… повидимому что-то с вашими стилями
не пашет в PHP
Вернее Пашет, но не последовательно, появляется надпись вслед за первой только тогда когда поле освободится для нее. и она так резко появляется
Спасибо :) перепробовал несколько плагинов, но в каждом была проблема – нельзя было убрать пустое место между показами.
Этот плагин такое умеет. Спасибо.
Роман, чтобы не дублировалось – надо прописать высоту, чтобы влезала только одна строчка.
как советовали выше добавляю в jquery.crawlLine строчку jQuery.noConflict(); и бегущая строка больше не бежит, в чем может быть дело?
Скрипт отличный, вот только position: relative; для IE7 помог, а вот в IE6 бегут 2 строки и по всей ширине экрана
jquery-1.5 – не работает.
1. Заметил некорректное поведение animate() для IE (всех версий) при нулевой ширине _textWidth.
Т.е. если суммарная ширина элементов textElement равна нулю, получается очень маленький _duration и нулевой сдвиг left, что отправляет IE в “Out of Memory”.
_textWidth = 0;
_duration = _textWidth*50 / _options.speed;
Решение – проводить animate() и bind событий только при положительной _textWidth.
2. Задекларирована, но не используется переменная _elWidth
переделал в вертикальную, получилось не плохо
Не хочет работать с accordion jQuery((