JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<h3>Настройки по умолчанию</h3>

<div class="str1 str_wrap">
    <p>text content and text content and text content and text content and text content and text content and text content and text content and text content and text content &nbsp;</p>
</div>

<h3>Движение слева на право</h3>

<div class="str9 str_wrap">
    <p>добрый день! подскажите, а как сделать смену картинок слева-направо? Или я туплю?</p>
</div>

<h3>Короткая строка (движение включено)</h3>

<div class="str1 str_wrap">
    <p>short text &nbsp;</p>
</div>
 <h3>Отключена возможность draggable (перетаскивания)</h3>

<div class="str2 str_wrap">
    <p>text content and text content and text content and text content and text content and text content and text content and text content and text content and text content</p>
</div>
 <h3>Плагин liMarquee позволяет перемещать (скролировать) любые элементы веб-страницы</h3>

<style>
    .str3 .str_item {
        font-size:0;
        line-height:0
    }
    .str3 img {
        opacity:0.8
    }
    .str3 img:hover {
        opacity:1
    }
    .str3.str_wrap.str_active {
        background:#fff;
    }
</style>
<div class="str3 str_wrap"> <a href="#"><img src="http://masscode.ru/media/k2/items/cache/1c0ae2205709722b62e843abc0471a55_S.jpg"></a>
 <a href="#"><img src="http://masscode.ru/media/k2/items/cache/01f1a05053c6242fcfa23075e5b963c1_S.jpg"></a>
 <a href="#"><img src="http://masscode.ru/media/k2/items/cache/6f43b5263fbba79c5962514b85d34738_S.jpg"></a>
 <a href="#"><img src="http://masscode.ru/media/k2/items/cache/8b6e33345ac8d5ffd9cf0d107a7d9e9d_S.jpg"></a>
 <a href="#"><img src="http://masscode.ru/media/k2/items/cache/9b2c4b44fb86522964124ed80d03c5e8_S.jpg"></a>
 <a href="#"><img src="http://masscode.ru/media/k2/items/cache/9ecd376e5371efaef9aad9bc9143aed8_S.jpg"></a>
 <a href="#"><img src="http://masscode.ru/media/k2/items/cache/19f9cefdfb07230a68581d617885a3af_S.jpg"></a>
 <a href="#"><img...

CSS

/*Layouut css*/
 body {
    color: #999;
    font: 13px/1.2em Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0 10px;
}
pre {
    text-align:left
}
.str1, .str2, .str3, .str4, .str5, .str6, .str9 {
    margin:0 0 30px 0;
}
.str4, .str5, .str6, .str8 {
    width:49% !important;
    display:inline-block;
    //display:inline;
    //zoom:1;
    vertical-align:top;
}
.str_wrap p {
    padding:10px 0;
    margin:0;
}
.str_vertical p {
    padding:10px;
}
h3, 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 ($) {
        $.fn.liMarquee = function (params) {
            var p = $.extend({
                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 файлу с нужным текстом
            }, params);
            return this.each(function () {
                var
                loop = p.loop,
                    strWrap = $(this).addClass('str_wrap');

                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 = -strMoveWidth;
                            if (p.circular) {
                                strMoveClone.clone().css({
                                    right: -strMoveWidth,
                                    width: strMoveWidth
                               ...