Умная бегущая строка на странице Confluence

В этой статье я рассказал, как сделать бегущую текстовую строку в Confluence с помощью устаревшего тега "marquee". Сейчас же я приведу пример создания более интеллектуальной и современной бегущей строки. Вот пример такой бегущей строки с нашего сайта:

Для приготвления такой бегущей строки нужно:

1. Скачать и закинуть к себе (например, на страницу Confluence) файл с javascript - crawler.js. В нем прописана логика.
2. Поместить нижеприведенный код в нужное место вашей страницы.
3. В коде нужно указать актуальный путь к файлу crawler.js и прописать пути к картинкам, или просто текст.
4. Так же в коде можно определить скорость бегущей строки и реакцию на курсор.
    
   html-код бегущей строки

   {html}
   <script type="text/javascript" src="http://www.teamlead.ru/download/attachments/87655047/crawler.js">
   </script>
   
   <div class="marquee" id="mycrawler">
   
   <a href="http://www.metlifealico.ru/" target="_blank"><img
   border="0" height="40" title="MetLife Alico"
   src="http://www.teamlead.ru/download/attachments/87655047/alico.gif"></a>
   
   <a href="http://www.life.com.ua/?lng=ru" target="_blank"><img
   border="0" height="40" title="Украинский GSM оператор мобильной связи Life"
   src="http://www.teamlead.ru/download/attachments/87655047/life.jpg"></a>
   
   </div>
   <script type="text/javascript">
   marqueeInit({
   uniqueid: 'mycrawler',
   style: {
   'padding': '0px',
   'height': '40px'
   },
   inc: 6, //максимальная скорость ускорения блока при приближении курса к краю (в пикселах)
   mouse: 'cursor driven', //поведение при наведении указателя. Возможные значения - ('pause' 'cursor driven' or false)
   moveatleast: 1, //скорость бегущей строки, когда указатель находится вне блока
   neutral: 150,
   savedirection: true
   });
   </script>
   {html}