"闪烁"随机文字与JavaScript [英] "Flashing" random text with javascript

问题描述

我想知道你们中是否有人知道一个可以让文字进出的脚本，比如当新的推文进来时Twitter如何自我更新，或者更具体地说是Apple的主页如何将这些文字闪烁在Hot News Headlines旁边。

I was wondering if any of you knew a script which can have text flash in and out, like how Twitter updates itself when a new tweet comes in or more specifically how Apple's home page has these text flashing next to "Hot News Headlines".

我有自己的设置文本，所以它不像我正在通过twitter或rss更新。

I have my own set text so it's not like I'm updating from twitter or rss.

例如我有
text1
text2
text3

For example I have "text1" "text2" "text3"

但我只希望text1显示约...说5秒，然后text2出现并用淡化或任何东西替换它

But I want only "text1" to show for about... say 5 seconds, then "text2" comes and replaces it by fading or anything

推荐答案

是的，它可以使用JavaScript setInterval 函数。

Yes, it's doable with the JavaScript setInterval function.

//Global Scope variables, usable in all functions...
var randomStuff = ["Foo", "Bar", "Even multiple Words"];
var $target;
var loadContentIndex = 0;

$(function() {
    $target = $('#target'); //Set the target div...
    loadContent(); //Initiate it once on page load...
    window.setInterval(loadContent, 2000); //And set it to work every 2000ms (or 2s).
});

function loadContent() {
    $target.fadeOut(function() { //Once fade out is complete...
        $target.text(randomStuff[loadContentIndex]); //Change the text
        $target.fadeIn(); //Fade back in.
    });

    loadContentIndex++; //Increase the array counter.
    if (randomStuff.length == loadContentIndex) { //If reached the end of the array...
        loadContentIndex = 0; //Reset the counter :)
    }
}

注意：我正在使用jQuery库来处理动画，因为它更容易。

这篇关于"闪烁"随机文字与JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！