Динамическая анимация обмена словами 3

Question

Динамическая анимация обмена словами 3

0

Следуя предыдущему вопросу от 2011 года, названному динамической анимацией замены слов.

Благодаря ответу Марека я смог создать анимацию для текста на странице, которая каждые несколько секунд меняет одно слово с другим словом из списка. Однако, когда предыдущий вопрос/пример был: "У меня есть заголовок, который гласит:" Это круто ", но я хочу, чтобы" круто "заменялось каждые несколько секунд" опрятным/удивительным /groovy/etc ".

Мне нужно, чтобы мой заголовок сказал, например, (ради продолжения) "Это классный человек". Проблема заключается в том, что, поскольку альтернативные слова длиннее, это заставляет предложение варьироваться по длине, когда оно вращается по каждому из слов. Есть ли способ указать, используя Pure JS, для "человека", чтобы оставаться на заданном расстоянии от "есть", поэтому альтернативные слова заполняют промежуток между и общее предложение остается той же длины?

И, если это возможно, могут ли альтернативные слова быть сосредоточены между "человеком" и "есть"?

Любая помощь очень ценится! Фил

В настоящее время Pure JS я (из предыдущего сообщения) гласит:

<script>
var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "This is cool";
function _getChangedText() {
    i = (i + 1) % words.length;
    console.log(words[i]);
    return text.replace(/cool/, words[i]);
}
function _changeText() {
    var txt = _getChangedText();
    console.log(txt);
    $("#changer").text(txt);
}
setInterval("_changeText()", 1000);
</script>
<span id="changer">This is cool</span>

user3324665 18 фев. 2014, в 19:43

Источник

0

просто примечание - это не «чистый», ванильный JS - jQuery тоже здесь ...
sinisake 18 фев. 2014, в 18:20

Теги:

javascript

html

2 ответа

0

Просто используйте 8-й индекс строки каждый раз и добавьте человека после нового слова.

Это то, что вы имеете в виду?

codebender 18 фев. 2014, в 15:48

Ещё вопросы

просто примечание - это не «чистый», ванильный JS - jQuery тоже здесь ...

sinisake · Accepted Answer · 2014-02-18T16-36-00.000Z

Это больше html/css вещь... однако, после нескольких модов:

http://jsfiddle.net/X3wZV/1/

var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "<span id='first'>This is</span> <span id='inner'>cool</span> <span id='sec'>man</span>";
function _getChangedText() {
    i = (i + 1) % words.length;
    console.log(words[i]);
    return text.replace(/cool/, words[i]);
}
function _changeText() {
    var txt = _getChangedText();
    console.log(txt);
    $("#changer").html(txt);
}
setInterval("_changeText()", 1000);

и немного стилизации (проверьте CSS, измените его в соответствии с вашими потребностями)... Я думаю, что это близко к тому, что вы хотите, если я правильно понимаю ваш вопрос... :)