Вставьте текст с помощью CSS или jQuery

0

Вот мой код:

JS

var object = ["your company", "email marketing", "your company"];
var mediaName = ["FB", "Tw", "FB"];
var action = ["say thanks", 'retweet it', 'like it'];
var index = 0;

function iterate() {
    setTimeout(function () {
        switchText();
    }, 2500);
}

function switchText() {
    document.querySelector('span.object').innerHTML = object[index];
    document.querySelector('span.medium').innerHTML = mediaName[index];
    document.querySelector('span.action').innerHTML = action[index];
    index++;
    if (index % 3 === 0) index = 0;
    iterate();
}
iterate();

CSS

body {
background: orange;
}
span {
background: #FFF;
padding: 5px;
border-radius: 2px;
color: orange;
font-weight: bold;
}

HTML

If someone mentions <span class="object"></span> on <span class="medium"></span> then <span 'class="action"></span>

2 вещи, на которых я застрял:

1/Я пытаюсь скользить в тексте, как на http://www.mailerloop.com/

2/Я хочу, чтобы первое предложение загружалось со страницы, а не через пару секунд

Здесь моя скрипка - http://jsfiddle.net/EdMN9/5/

Благодаря :)

  • 0
    2-й выпуск .. jsfiddle.net/Zr2j2
  • 0
    отлично, есть идеи по поводу скользящего текста?
Теги:

2 ответа

0
Лучший ответ

Второй момент очень легко достичь: просто напишите первое предложение там, и вам не нужно ждать загрузки:

<p>If someone mentions <span class="object">your company</span> on <span class="medium">FB</span> then <span class="action">say thanks</span>

Этот путь уже существует, и ждать не будет.

Первый пункт... Если вы хотите реализовать его с помощью чистого javascript, вы должны искать фрагмент кода, способный это сделать. Я лично использую jQuery, потому что намного легче его достичь.

ОБНОВИТЬ

Хорошо, если нет чистых js, вы можете использовать это: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

Скрипка здесь, чтобы показать вам, что она работает: http://jsfiddle.net/EdMN9/13/

Вам просто нужно скрыть элемент с помощью слайда, изменить его, а затем показать его снова. Требуется немного больше CSS, я добавил к классам классов no-wrap, чтобы избежать двух строк, но вам придется избегать абзаца "спускаться" (проверить скрипку)

  • 0
    Не должно быть чисто JS
  • 0
    может быть JQuery или CSS, не возражайте
0

Я не знаю, что это оптимальное решение. Но вы можете вызвать switchText(); перед повторением() один раз, чтобы получить такое решение.

var object = [ "your company", "email marketing", "your company"];
var mediaName = ["FB", "Tw", "FB"];
var action = [ "say thanks", 'retweet it', 'like it' ];
var index = 0;
switchText();
function iterate() {  
    setTimeout(function() {
        switchText();
    }, 2500);
}
  • 0
    Благодарю. какая-нибудь подсказка к скользящему тексту?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню