代码之家 › 专栏 › 技术社区 › Federico

加速滚动文本

setinterval javascript

Federico · 技术社区 · 7 年前

我有一个从右到左滚动文本的函数。我想加速滚动,我试着修改 1/100 但一切都没变。

先谢谢你。

$(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>

1 回复 | 直到 7 年前

Adrian Pop 7 年前

改变字幕移动速度的是 indent-- indent = indent - 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>

推荐文章

Brian Millot · 计时器不会以clearInterval停止

4 年前

AdRock · 延迟对象中的jquery间隔

8 年前

sqlchild · setInterval函数不停止但无限运行

8 年前

zephyr.mao · 使用setInterval每5秒增加10个参数,但结果顺序非常奇怪

8 年前

Madpop · 如何使用角度2停止设置间隔闪烁+

8 年前

shubham saurabh · 如何在reactjs中的setInterval内返回JSX

8 年前

Manoj Bhardwaj · 我想更改progressBarProgress值

8 年前

Orhan Gazi · 重置并重复设置间隔

8 年前

user9317722 · 记分板上的Javascript计时器在0后变为-1

8 年前

Alexis Brunet · NodeJS-无限调用承诺函数

8 年前