Question

我有此功能，可从右向左滚动文本。我想加快滚动速度，我尝试修改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>

Answer 1

改变选取框移动速度的是代码中的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>

加快滚动文字

1 个答案: