Главная » Файлы » Прочие скрипты » jQuery

Придаём реалистичность прокрутке текста для HTML тега < marquee > на jQuery
23.06.14, 11:31:43

Скачать файл




Интересный плагин, который позволяет оживить прокрутку текста, осуществляемую через тег marquee

Для начала посмотрите ДЕМО (Сверху - обработка через jQuery, снизу - без обработки)

Установка:

После /head на нужных страницах вставляйте:
Код
<script src="/js/jquery.marquee.js" type="text/javascript"></script>

<script type="text/javascript">
<!--  
$(function () {  
$('.demo marquee').marquee('pointer').mouseover(function () {  
$(this).trigger('stop');  
}).mouseout(function () {  
$(this).trigger('start');  
}).mousemove(function (event) {  
if ($(this).data('drag') == true) {  
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);  
}  
}).mousedown(function (event) {  
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);  
}).mouseup(function () {  
$(this).data('drag', false);  
});  
});  
//-->  
</script>


Для того, чтобы текст в тегах marquee начал обрабатываться, достаточно обрамить их в div'ы с классом demo:
Код
<div class="demo">  
  <marquee behavior="scroll" direction="left" scrollamount="2" width="350">

Здесь текст, который движется справа налево</p></marquee>  
  <marquee scrollamount="2" behavior="alternate" direction="right" width="350">

Здесь текст, который движется то вправо, то влево</p></marquee>  
  <marquee loop="3" behavior="slide" direction="right" width="350">

Здесь текст, который можно двигать курсором мышки</p></marquee>  
  <marquee behavior="scroll" direction="down" scrollamount="2" height="100" width="350">

Здесь текст, который движется сверху вниз</p></marquee>
  </div>


Остаётся лишь залить скрипт из прикреплённого архива в папку js

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: реалистичность, тега, на, Marquee, JQuery, Придаём, текста, Html, прокрутке, для
Просмотров: 227 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: