Бегущая строка на 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качать плагин
34 Коментариев to Бегущая строка на jQuery c прокруткой текста
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (29)
- jQuery (16)
- 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, чтобы вписывалось на моём сайте в дизайн. И вот после этого началось