 |
Примеры Javascript |
 |
Коллекция скриптов на Javascript
Скрипт "Движение текста по контуру"
Пример скрипта "Движение текста по контуру". Такого рода скрипты удобно реализовывать при помощи таймеров, которые автоматически отключаются после выполнения задачи.
Пример скрипта "Движение текста по контуру"
Движение текста по контуру квадрата размером в 100 пиеселей
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<script type="text/javascript">
var id = setInterval(function(){
// Работа таймера
var idt = document.getElementById('timer');
idt.innerHTML = parseInt(idt.innerHTML) + 1;
// Текст который движется
var txt = document.getElementById('txt');
// Размер квадрата
var ids = document.getElementById('id_size');
var size = parseInt(ids.innerHTML);
// Координаты
var idx = document.getElementById('id_x');
var x = parseInt(idx.innerHTML);
var idy = document.getElementById('id_y');
var y = parseInt(idy.innerHTML);
// Достигнут ли правый нижний угол
var idl = document.getElementById('id_lr');
var lr = parseInt(idl.innerHTML);
if(x >= size && y >= size)
{
// Достигнут правый нижний угол
idl.innerHTML = 1;
lr = 1;
}
// Идем вправо
if(lr == 0)
{
if(x < size)
{
idx.innerHTML = x + 1;
txt.style.paddingLeft = x;
}
// Идем вниз
else if(y < size)
{
idy.innerHTML = y + 1;
txt.style.paddingTop = y;
}
}
else
{
// Идем влево
if(y > 0 && x > 0)
{
idx.innerHTML = x - 1;
txt.style.paddingLeft = x;
}
// Идем вверх
else if(y > 0)
{
idy.innerHTML = y - 1;
txt.style.paddingTop = y;
}
else
{
// Мы достигли начальной точки
// отключаем таймер
clearInterval(id);
}
}
}, 20);
</script>
<div>size = <span id='id_size'>100</span>,
x = <span id='id_x'>0</span>,
y = <span id='id_y'>0</span>,
lr = <span id='id_lr'>0</span>,
timer = <span id='timer'>0</span></div>
<div id='txt'>Заданный текст</div>
</body>
</html>
|
