JSFiddle - React, Tailwind, and code Playground
HTML
<div class="str1 str_wrap">
<p>Я двигаюсь справа налево. Читай меня!Я двигаюсь справа налево. Читай меня!Я двигаюсь справа налево. Читай меня!Я двигаюсь справа налево. Читай меня!Я двигаюсь справа налево. Читай меня!Я двигаюсь справа налево. Читай меня!</p>
</div>
CSS
/*Layouut css*/
body {
color: #999;
font: 13px/1.2em Arial, Helvetica, sans-serif;
margin: 0;
padding: 0 10px;
}
pre {
text-align: left
}
.str1 {
margin: 0 0 30px 0;
}
.str_wrap p {
padding: 10px 0;
margin: 0;
}
p {
text-align: left;
}
/*Plugin CSS*/
.str_wrap {
overflow: hidden;
//zoom:1;
width: 100%;
font-size: 12px;
line-height: 16px;
position: relative;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
background: #f6f6f6;
white-space: nowrap;
}
.str_wrap.str_active {
background: #f1f1f1;
}
.str_move {
white-space: nowrap;
position: absolute;
top: 0;
left: 0;
cursor: move;
}
.str_move_clone {
display: inline-block;
//display:inline;
//zoom:1;
vertical-align: top;
position: absolute;
left: 100%;
top: 0;
}
.str_vertical .str_move_clone {
left: 0;
top: 100%;
}
.str_down .str_move_clone {
left: 0;
bottom: 100%;
}
.str_vertical .str_move,
.str_down .str_move {
white-space: normal;
width: 100%;
}
.str_static .str_move,
.no_drag .str_move {
cursor: inherit;
}
JavaScript
/*Код плагина*/
(function($) {
var methods = {
init: function(options) {
var p = {
direction: 'left', //Указывает направление движения содержимого контейнера (left | right | up | down)
loop: -1, //Задает, сколько раз будет прокручиваться содержимое. "-1" для бесконечного воспроизведения движения
scrolldelay: 0, //Величина задержки в миллисекундах между движениями
scrollamount: 50, //Скорость движения контента (px/sec)
circular: true, //Если "true" - строка непрерывная
drag: true, //Если "true" - включено перетаскивание строки
runshort: true, //Если "true" - короткая строка тоже "бегает", "false" - стоит на месте
xml: false //Путь к xml файлу с нужным текстом
};
if (options) {
$.extend(p, options);
}
return this.each(function() {
var
loop = p.loop,
strWrap = $(this).addClass('str_wrap'),
fMove = false;
var code = function() {
strWrap.wrapInner($('<div>').addClass('str_move'));
var
strMove = $('.str_move', strWrap).addClass('str_origin'),
strMoveClone = strMove.clone().removeClass('str_origin').addClass('str_move_clone'),
time = 0;
if (p.direction == 'left') {
var
strWrapWidth = strWrap.width(),
strMoveWidth = strMove.width();
strWrap.height(strMove.outerHeight())
if (strMoveWidth > strWrapWidth) {
//var leftPos = -strMove.width();
var leftPos = strWrapWidth;
if (p.circular) {
strMoveClone.clone().css({
right: -strMoveWidth,
width: strMoveWidth
}).appendTo(strMove);
strMoveClone.css({
...