|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
17.03.2014, 19:42 | #1 |
Пользователь
Регистрация: 24.11.2013
Сообщений: 13
|
Движение текста
Текст передвигается по контуру квадрата.
Нужно сделать, чтоб размер квадрата вводил пользователь и начало движения начиналось при нажатии на кнопку. Код HTML:
<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> Последний раз редактировалось Stilet; 17.03.2014 в 20:41. |
18.03.2014, 14:08 | #2 |
Форумчанин
Регистрация: 26.01.2007
Сообщений: 278
|
Как-то так?
Правда jsfiddle движение не показывает. Скопируйте код и пробуйте у себя. PS: не забудьте подключить библиотеку jQuery. Последний раз редактировалось ATL; 18.03.2014 в 14:59. |
18.03.2014, 18:12 | #3 |
Форумчанин
Регистрация: 15.02.2012
Сообщений: 823
|
Не надо вешать jQuery.
Вам достаточно весь js-код завернуть в функцию move, и её вызывать при нажатии на кнопку; а также заменить ваши span с идентификаторами на input и получать значения обращаясь не к свойству ".innerHTML", а к ".value"
^-.-^ My GitHub
Последний раз редактировалось Fenex; 18.03.2014 в 19:05. |
Опции темы | Поиск в этой теме |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Движение со скоростью света и быстрее скорости света - Сверхсветовое движение | Alar | Свободное общение | 354 | 13.11.2011 21:32 |
Движение колец и Движение линий сверху | Iren1993 | Помощь студентам | 2 | 07.11.2011 19:48 |
Движение текста | Vinnipux | JavaScript, Ajax | 4 | 25.02.2011 06:47 |
Движение текста по Label'у | Vladya | Помощь студентам | 9 | 02.04.2009 20:58 |
Движение текста вместе с автофигурой | Sleepwalker | Microsoft Office Excel | 2 | 13.12.2006 12:35 |