Эффект печатной машинки
Всем доброй ночи. Хотелось бы реализовать эффект печатной машинки на сайте, чтобы буквы печатались через определенный интервал. Есть такой код, который работает корректно, но желаемого результата не дает. Подскажите, в чем ошибка. Код написан на jQuery:
$.fn.typewriter = function(params) {
var params = params || {},
repeat = 'undefined' !== typeof params.repeat && ('boolean' === typeof params.repeat || 'number' === typeof params.repeat && (params.repeat === 0 || params.repeat === 1)) ? !!params.repeat : true,
speed = 'undefined' !== typeof params.speed && 'number' === typeof params.speed && params.speed > 0 ? params.speed : 150;
return this.each(function() {
var $this = $(this),
text = $.trim($this.text());
setTimeout(function() {
var line = ' ' + text,
i = 0;
if (i++ < line.length) {
$this.text($this.text().substring(1, i));
} else {
if (repeat === false) {
exit();
} else {
$this.text(' ');
i = 0;
}
}
}, speed);
});
};
|
setTimeout вызывает коллбэк один раз, используй setInterval. И exit() - это твои фантазии. Используй clearInterval.
|
Цитата:
P.S.: Cорри, exit() с PHP перепутал :haha: |
Проблема решена :)
Тему можно закрывать. |
Печатная машинка
seniormelikyan,
Вариант :write:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
font-size: 24px;
height: 30px;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.fn.typewriter = function (params) {
function writer(elem, text, speed, repeat) {
var i = 0,
TextNode = document.createTextNode("");
elem.appendChild(TextNode);
elem.timer = setInterval(function () {
if (text.length === i) repeat ? (i = 0, TextNode.data = "") : clearInterval(elem.timer);
else
for (TextNode.data += text[i++];" " === text[i];) TextNode.data += text[i++]
}, speed)
}
var options = {
speed: 500,
repeat: false
}, options = $.extend(options, params);
return this.each(function () {
var text = $(this).text();
$(this).text("");
writer(this, text, options.speed, options.repeat)
})
};
</script>
<script type="text/javascript">
$(window).load(function(){
$(".one").typewriter({repeat: true});
$(".too").typewriter();
});
</script>
<title></title>
</head>
<body>
<div class="one">Всем доброй ночи.</div>
<div class="too">Код написан на jQuery.</div>
</body>
</html>
|
<div id="data"></div>
<script>
(function () {
var str = 'Привет форум JavaScript',
len = str.length,
i = 0,
tId = setInterval(function () {
data.innerHTML += str[i++];
if (i == len) clearInterval(tId);
}, 400);
}());
</script>
<div id="data"></div>
<script>
(function () {
var str = 'Привет форум JavaScript',
len = str.length + 1,
i = 0;
setInterval(function () {
data.innerHTML += str[i++];
if (i == len) data.innerHTML = '', i = 0;
}, 400);
}());
</script>
мой вариант :) |
Подскажите, пожалуйста, как сделать перенос строки?
<p id="data"></p>
<script>
(function () {
var str = 'Первая строка <br> Вторая строка!',
len = str.length,
i = 0,
tId = setInterval(function () {
data.innerHTML += str[i++];
if (i == len) clearInterval(tId);
}, 50);
}());
</script>
|
Feex,
<p id="data"></p>
<script>
(function () {
var str = 'Первая строка <br> Вторая строка!',
len = str.length,
i = 0,
a,
tId = setInterval(function () {
a = str[i];
if(a == '<') {a = '<br>'; i += 4 }
else i++
data.innerHTML += a;
if (i == len) clearInterval(tId);
}, 50);
}());
</script>
|
Цитата:
В этой теме есть решение, Ваше, кстати, просто отличный вариант, но хотелось что-то по-легче) В общем, Спасибо еще раз) |
| Часовой пояс GMT +3, время: 01:15. |