Бегущая строка без использования тега <marquee>

46
22 января 2018, 09:34

Как можно создать бегущую строку на javascript? Текст, который надо показывать предварительно вводится пользователем и потому может быть любой длины.

Пока у меня имеется следующий костяк:

window.onload = function() { 
 
  document.getElementById("button").onclick = function() { 
 
    var value = document.getElementById("input").value; 
 
    // код, который нужно дописать 
 
  }; 
};
<form> 
  <label for="input">Введите строку</label><br> 
  <input type="text" id="input"> 
  <input type="button" id="button" value="Жми!"> 
</form>

Answer 1

document.getElementById("button").onclick = function() { 
  var value = document.getElementById("input").value; 
  document.getElementById('marquee').innerHTML = '<span>'+ value +'</span>'; 
};
#marquee { 
    display: block; 
    width: 100%; 
    line-height: 50px; 
    white-space: nowrap; 
    color: red; 
    overflow: hidden; 
    box-sizing: border-box; 
} 
#marquee span { 
    display: inline-block; 
    padding-left: 100%; 
    animation: marquee 15s linear infinite; 
} 
@keyframes marquee { 
    0%   { transform: translate(-100%, 0); } 
    100% { transform: translate(0, 0); } 
}
<form> 
  <label for="input">Введите строку:</label><br> 
  <input type="text" id="input"> 
  <input type="button" id="button" value="Жми!"> 
</form> 
<div id="marquee"></div>

Answer 2

Когда вводим, сначала строка печатается в поле, а после начинает туда-сюда бегать.

var line = '',  
speedPrint = 200,  
speedTicker = 20,  
i = 0,  
l = 0,  
back = false,  
ticker = document.getElementById('ticker'),  
input = document.getElementById('text'),  
end = function () { 
    w = document.body.clientWidth; 
    ticker.style.position = 'relative'; 
    if (!back && l < w) { 
        l += 5; 
        ticker.style.left = l + 'px'; 
    } else { 
        if (0 === l || 0 > l) { 
            l = 0; 
            back = false; 
            ticker.style.left = '0px'; 
        } else { 
            back = true; 
            l -= 5; 
            ticker.style.left = l + 'px'; 
        } 
    } 
    setTimeout(end, speedTicker); 
},  
text = function () { 
    if (!(line = input.value)) { 
        input.focus(); 
        return; 
    } 
    setTimeout(run, 200); 
},  
run = function () { 
    if (i < line.length) { 
        i++; 
        ticker.innerText = line.substring(0, i); 
        setTimeout(run, speedPrint); 
    } else { 
        end(); 
    } 
};
<span id="ticker"></span> 
<hr> 
<input name="text" type="text" id="text"> 
<a href="javascript:text()"> 
   Побежали 
</a>

READ ALSO
Recaptcha invisible

Recaptcha invisible

При подключении recaptcha invisible, необходимо указывать параметр data-callback, можно стандартно в колбек функции сделать сабмит определенной формыНо...

54
Как получить значение атрибута, если в исходном коде написано {{= flyingStatus(it.m_status) }}?

Как получить значение атрибута, если в исходном коде написано {{= flyingStatus(it.m_status) }}?

Если просматривать исходный код страницы, то вместо "обычного" значения атрибута написано следующее (class = конечно не в самом атрибуте, а для...

131
Можно ли подгружать рекламу Google спустя время?

Можно ли подгружать рекламу Google спустя время?

Доброго времениКак мера обхода Adblock подумал, а можно ли как-то попробовать подгружать рекламу гугла, спустя пару секунд, например ?

82