Бегущая строка на 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)
У кого-нибудь решилась проблема с noConflict?
Я пишу сверху:
$j = jQuery.noConflict();
$j(document).ready(function(){
$j(‘.toppartners’).crawlLine({crawElement:’.move’});
});
Но не работает!!! Напишите решение…
Спасибо, понадобилась бегущая строчка=)
Привет всем.
Подскажите пожалуйста куда сам плаген положить чтоб он на Joomla работал,а то строка и скобы появляются,а движения ни какого нет.
Заранее спасибо.
Очень понравилась эта новость. Как зделать так что бы строка ехала с низу вверх…
как переделать в вертикальную…
Спасибо большое. Казалось такой простой скрипт, а не нашел ни одного вменяемого, а ваш как раз делает все что мне нужно: вертится непрерывно по кругу и останавливается при наведении.
Удачи вам!
Убивает весь процессор!
Доброго всем времени.
Плагин понравился, хотя есть некоторая заморока. Если текста в строке мало (ширина тега p меньше ширины окна) работает стока не очень. Текст стартует от середины и не доезжает до конца. Обошёл, установив min-width для p. Работает нормально, но выглядит пустовато. Было бы неплохо чтобы число дублирующихся тегов текста сообщения расчитывалось в зависимости от длины текста.
Спасибо! Классный скрипт. Писать самому долго, а тут всё работает) Буду юзать в своих проектах. Респект!
для класса .bg надо добавить display:block; position:relative – это решает проблему для Е7. Лично у меня возникла такая – текст не прятался при оверфлоу в Е7