Текстовый эффект
Приветствую!
Недавно нашел такой скрипт, который создает эффект растягивания текста
<script>var sizes = new Array("0px", "1px", "2px","4px", "8px");
sizes.pos = 0;
function rubberBand()
{
var el = document.all.elastic;
if (null == el.direction)
el.direction = 1;
else if ((sizes.pos > sizes.length - 2) ||
(0 == sizes.pos))
el.direction *= -1;
el.style.letterSpacing = sizes[sizes.pos += el.direction];
}
window.tm = setInterval('rubberBand()', 100);
</script>
<font color="#ffd700" id="elastic">Text Текст</font>
Подскажите как сделать так, чтобы, например после второго сжатия эффект прекращался? |
<script>var sizes = new Array("0px", "1px", "2px","4px", "8px");
sizes.pos = 0;
var count = 0;
function rubberBand()
{
var el = document.all.elastic;
if (sizes.pos === 0) count++;
if (count > 2) {
clearInterval(window.tm);
count = 0;
return;
}
if (null == el.direction)
el.direction = 1;
else if ((sizes.pos > sizes.length - 2) ||
(0 == sizes.pos))
el.direction *= -1;
el.style.letterSpacing = sizes[sizes.pos += el.direction];
}
window.tm = setInterval(rubberBand, 100);
</script>
<font color="#ffd700" id="elastic">Text Текст</font>
|
jsnb,
Премного благодарен. Случайно не знаете как сделать так, чтобы текст помимо растягивания (letterSpacing) уменьшался и увеличивался в размере? |
Цитата:
|
jsnb,
Спасибо, сработало! |
Только вот еще не пойму, если добавить второй массив для fontSize, как ту быть?
var sizes2 = new Array("12px", "15px", "19px"); .... el.style.fontSize = sizes2[sizes2.pos += el.direction]; // не срабатывает |
Цитата:
el.style.fontSize = sizes2[sizes.pos += el.direction]; или отдельно считать счетчик позиций в функции для второго массива. |
jsnb, если делать столько же элементов, как в первом массиве, то не стоит ли тогда рассмотреть вариант, что бы первый массив сделать из мелких массивов или заменить массив на обьект ?
[[0, 12], [1, 15], [2, 19],[4, ?], [8, ?]] ? -- число px -- вынести в скрипт, где устанавливается значение, так... ну или, что бы было понятно читать, что к чему относится... [ {'size': 0,'fontSize':12}, {'size': 1,'fontSize':15}, {'size': 2,'fontSize':19}, {'size': 4,'fontSize':?}, {'size': 8,'fontSize':?} ] Предложил бы еще вот так, тогда будет проще перебирать... вот только помню, были какие то траблы, когда числа в качестве ключей... (поискал, надо ключи не в виде чисел представить, в противном случаи произойдет сортировка перед перебором) {0: 12, 1: 15, 2: 19 4: ?, 8: ?} превращается в {"0px": 12, "1px": 15, "2px": 19 "4px": ?, "8px": ?} В результате, ключ уже сразу вписывать, а вот при использовании значения, тогда дописывать "px", хотя можно и не заморачиваться с этим и сразу тогда писать с "px" |
Благодарю за ответы, очень помогли
|
А как вместо этого var el = document.all.elastic; подставить что-то на подобии $('div[id^="elastic"]'); .. ?
|
| Часовой пояс GMT +3, время: 21:45. |