Бегущая строка на 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качать плагин
39 Коментариев 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)
все неплохо. но вот “скрол текста” срабатывает только в одну сторону
Скрол текста плохо работает из-за iframe, если открыть в новом окне – все будет ОК
Отличный скрипт, плавная прокрутка.
То, что нужно. Спасибо!
… не отлажено для ie6, зависит от внешней верстки
В своих статьях о плагинах я стараюсь больше уделить внимание JS… а не верстке. Плагин работает в IE6 нормально. А верстку я действительно под ie6 не делал…
ahuennaya vesh!!! spasibo!!!
mb shas dorabotaem daje!!! rulnaya tema…sami pisali skript 4asa 3 – on vishel krivoy ^^
shas poprobuem tvoy zauzat’ – s vidu to 4to NADO )))
Все хорошо, но бесит эта рябь (((( Можно как-то избавиться от нее?
Видел бегущую строку на mootools , она нормальная, без ряби! Но конфликтует с форумами IPB , поэтому ищу альтернативу…
Вы сморите на работу плагина скорее всего в FF ?
FF часто отображает двигающиеся элементы с рябью…
Хм, вот только интересно, что за версия jQuery тут используется, вроде взял с оф. сайта последнюю версию. Попробовал подружить бегущую строку и thickbox – не вышло ничего хорошего. На взятой с оф. сайта версии стока не бегаеает, а если брать ту, что в архиве, то thickbox жутко тормозит..
Данный плагин дружит с версиями 1.2.6 и выше….
в архиве к плагину лежал 1.3.pack, я заменил его на jquery-1.3.2.min. Все работает нормально.
Очень полезный плагин, спасибо :)
>Все хорошо, но бесит эта рябь (((( Можно как-то избавиться от нее?
<Лечится правильной версткой документа.
Недостаток этого плагина нашел лишь один: память ест постоянно и цпу забирает.
Спасибо за плагин.
Верстка нет ошибок не в HTML не в CSS.
Что значит нормальная верстка?
Рябь то всеравно есть :-(
Что сделать чтобы небыло?
Алексей, спасибо за действительно хороший плагин.
Не подскажите, как его переделать для вертикальной прокрутки? Я конечно заменил Left на Top и Width на Height, он работает, но на колесо мыши не реагирует.
Видать моих нулевых познаний JS не совсем хватает )))
Был-бы очень признателен за помощь!
звиняюсь, сам разобрался %) Еще раз спасибо.
А как зделать строку что бы она не бежала, а появлялись буквы по очередно и по порядку.
Спасибо. С уважением Евгений Борисвич
Для этого вам нужен другой плагин.
например – jTypeWriter
а такой же есть для mootools?
Скорее всего есть. Но что-то конкретное посоветовать не могу :)
под ie7 к .news надо подписать position: relative; ну и настроить отступы
Спасибо за скрипт, поставился из-коробки, IE+FF+Opera works fine.
Огромное спасибо за отличный плагин все работает замечательно!
Подскажи пожалуйста, а как сделать высоту одну строку (т.е. по размеру шрифта) и без картинок… А то я что-то разобраться никак не могу..
Заранее благодарен
привет… а как его вообще поставить на джумлу? может кто урок даст? а то у меня не получилось…. спасибо