Ускорить прокрутку текста

Question

Ускорить прокрутку текста

1

У меня есть эта функция, которая прокручивает текст справа налево. Я хочу ускорить прокрутку, я пытался изменить 1/100 но ничего не меняется.

Какие-нибудь советы?
Спасибо в adavnce.

$(document).ready(function() {
    var marquee = $('div.marquee');
    console.log(marquee);
    marquee.each(function() {
        var mar = $(this),indent = mar.width();
        mar.marquee = function() {
            indent--;
            mar.css('text-indent',indent);
            if (indent < -1 * mar.children('p').width()) {
                indent = mar.width();
            }
        };
        mar.data('interval',setInterval(mar.marquee,1/100));
    });
});

.marquee {
    position:fixed;
    top:0;
    right:0;
    padding:10px 0;
    height:1.2em;
    width:100vw;
    font-family:'super';
}
.marquee p {
	display:inline;
    white-space:nowrap;
    color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class=marquee>
<p>1 2 3 4 5 6 7 8 9 0</p>
</div>

Federico 29 окт. 2018, в 11:54

Источник

2

Увеличьте декрет indent .
Teemu 29 окт. 2018, в 10:40
0

Вы знаете, что вторым аргументом для setInterval является задержка в миллисекундах ? Даже значение 1 будет происходить тысячу раз в секунду, 1/100 будет 100 000 раз в секунду! На самом деле я не знаю, будет ли функция принимать дробные значения для этого параметра задержки, и если нет, то что произойдет, если вы попытаетесь передать его один - но это, вероятно, не делает то, что вы ожидаете. Как говорит @Teemu, лучший способ сделать это визуально быстрее - уменьшить indent более чем на 1, а затем дать setInterval интервал времени, скажем, 10-50 мс.
Robin Zigmond 29 окт. 2018, в 10:44

Теги:

javascript

setinterval

1 ответ

Ещё вопросы

Вы знаете, что вторым аргументом для setInterval является задержка в миллисекундах ? Даже значение 1 будет происходить тысячу раз в секунду, 1/100 будет 100 000 раз в секунду! На самом деле я не знаю, будет ли функция принимать дробные значения для этого параметра задержки, и если нет, то что произойдет, если вы попытаетесь передать его один - но это, вероятно, не делает то, что вы ожидаете. Как говорит @Teemu, лучший способ сделать это визуально быстрее - уменьшить indent более чем на 1, а затем дать setInterval интервал времени, скажем, 10-50 мс.

Adi · Accepted Answer · 2018-10-29T08-57-00.000Z

Вещь, которая изменяет скорость перемещения indent-- - это indent-- строка в вашем коде. Отступ уменьшается, поэтому объект перемещается влево. Чтобы изменить скорость, вы можете сделать что-то вроде indent = indent - K, где K - значение, которое описывает вашу скорость.

Ниже вы можете увидеть небольшой пример. Я добавил две кнопки, которые помогут вам контролировать скорость. Надеюсь, поможет! Ура!

var marqueeSpeed = 2;

$(document).ready(function() {
    var marquee = $('div.marquee');
    marquee.each(function() {
        var mar = $(this),indent = mar.width();
        mar.marquee = function() {
            indent = indent - marqueeSpeed;
            mar.css('text-indent',indent);
            if (indent < -1 * mar.children('p').width()) {
                indent = mar.width();
            }
        };
        
        mar.data('interval', setInterval(mar.marquee, 1/100));
    });
});

var increase = function() {
    ++marqueeSpeed;
}

var decrease = function() {
    if (marqueeSpeed > 0) {
        --marqueeSpeed;
    }
}

.marquee {
    position:fixed;
    top:0;
    right:0;
    padding:10px 0;
    height:1.2em;
    width:100vw;
    font-family:'super';
}
.marquee p {
	display:inline;
    white-space:nowrap;
    color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class=marquee>
<p>1 2 3 4 5 6 7 8 9 0</p>
</div>

<br>
<br>
<button onclick="increase()">Increase speed</button>
<button onclick="decrease()">Decrease speed</button>

большое спасибо! Ваш пример очень помогает!
Рад это слышать :) Кроме того, я рекомендую вам прочитать о requestAnimationFrame , который может помочь вам больше не использовать интервал. Ура!