Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.96/47: Рейтинг темы: голосов - 47, средняя оценка - 4.96
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 32

Двигающийся текст

12.10.2015, 23:28. Показов 10057. Ответов 22
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Создайте страничку, на которой по основному тексту "проплывает" Ваше имя. Алгоритм движения: текст начинает двигаться по заданной траектории; через некоторое время текст меняет направление движения, доходит до исходного положения и все повторяется
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
12.10.2015, 23:28
Ответы с готовыми решениями:

Плавно двигающийся блок
http://vkontakte.ru/developers.php - На этой страничке вконтакте реализована следующуая технология при нажатии на кнопку плавно...

Создать двигающийся 3D текст
Народ, помогите пожалуйста. Немного разбираюсь в С\C++. Надо написать прогу, которая бы отображала двигающийся и крутящийся текст. С чего...

OpenGL, двигающийся текст
Как возможно задать движение тексту, взятому из файла, из верхнего правого угла в нижний левый+отобразить его отскакивание от границы? На...

22
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
13.10.2015, 02:03
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
#myName {position: absolute; top: 123px; font-size: 64px; font-weight: bold}
</style>
<script>
var start = 23;
var final = 654;
var dir = 1;
var pos = start;
function moveName ()
{
pos += dir;
if (pos == start || pos == final) dir *= -1;
document.getElementById ('myName').style.left = pos + 'px';
setTimeout (moveName, 10);
}
onload = moveName;
</script>
<body>
<div id="myName">Sergilonio</div> 
</body>
0
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 32
13.10.2015, 06:48  [ТС]
Движение должно быть таким: в правый верхний угол, затем горизонтально в левый, затем в правый нижний угол.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
13.10.2015, 12:27
Цитата Сообщение от Sergilonio Посмотреть сообщение
Движение должно быть таким: в правый верхний угол, затем горизонтально в левый, затем в правый нижний угол.
вообще-то вам изначально следовало это указать

укажите теперь и "исходное положение" - т.е. "откуда именно надо начинать движение в правый верхний угол"?

а то я размещу там, где мне захочется, а вас это опять не устроит
0
0 / 0 / 0
Регистрация: 12.10.2015
Сообщений: 32
13.10.2015, 16:41  [ТС]
Из левого нижнего угла.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
14.10.2015, 00:11
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
html, body {height: 100%; overflow: hidden}
p {margin: 45px}
#myName {position: absolute; z-index: 5; font-size: 64px; font-weight: bold; color: red}
</style>
<script>
onload = function ()
{
with (document.body) var W = clientWidth, H = clientHeight;
var obj = document.getElementById ('myName');
with (obj) var w = offsetWidth, h = offsetHeight;
 
var P = [{'x' : 0    , 'y' : H - h},
         {'x' : W - w, 'y' :     0},
         {'x' :     0, 'y' :     0},
         {'x' : W - w, 'y' : H - h}];
var j = 0;
var L = P [0].x;
with (obj.style) left = P [0].x + 'px', top = P [0].y + 'px';
   function move ()
   {
   if (L == P [j + 1].x) {j++; if (j == 3) P.reverse (), j = 0}
   else
      {
      L += (P [j + 1].x > P [j].x) ? 1 : -1;
      var A = P [j].y - P [j + 1].y,
          B = P [j].x - P [j + 1].x,
          C = P [j].x * P [j + 1].y - P [j + 1].x * P [j].y,
          T = Math.ceil ((A * L + C) / B);
      with (obj.style) left = L + 'px', top = T + 'px';
      } 
   setTimeout (move, 2);
   }
move ();
}
</script>
 
<body>
<div id="myName">Sergilonio</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
</body>
http://codecenter.awardspace.com/movetext.html
1
14.10.2015, 00:11

Не по теме:

Цитата Сообщение от kalabuni Посмотреть сообщение
[[[[[[[[[[[[[[[[[[[[[[[
это к чему?
код-то рабочий

0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
14.10.2015, 00:15
Цитата Сообщение от BANO Посмотреть сообщение
это к чему?
код-то рабочий
вы это о чём?
0
14.10.2015, 00:23

Не по теме:

kalabuni, знаю такой прикол, сам пользуюсь, только вот меня на нём не палили

0
14.10.2015, 00:34

Не по теме:

Цитата Сообщение от BANO Посмотреть сообщение
знаю такой прикол, сам пользуюсь, только вот меня на нём не палили
потому что нет у вас такого "хвостика", как есть вы у меня :)

0
0 / 0 / 0
Регистрация: 12.02.2015
Сообщений: 7
21.12.2015, 19:45
Здравствуйте! Помогите пожалуйста с заданиями.
1. Создайте страничку, на которой по основному тексту "проплывает" Ваше имя. Алгоритм движения: текст двигается по заданной траектории; через некоторое время текст "скачком" возвращается в исходное положение и все повторяется.
Движение: Из нижнего правого угла в верхний левый, далее в просто вниз, далее в верхний правый угол.
2. Создайте страничку, на которой по основному тексту "проплывает" Ваше имя. Алгоритм движения: текст начинает двигаться по заданной траектории; через некоторое время текст меняет направление движения, доходит до исходного положения и все повторяется.
3. Создайте страничку, на которой по основному тексту "проплывает" ваше имя. Алгоритм движения: текст должен двигаться по косинусоиде сверху вниз и "скачком" возвращаться в исходное положение.
4. Создайте страничку, на которой по основному тексту "проплывает" Ваше имя. Алгоритм движения: текст должен двигаться по косинусоиде сверху вниз, затем менять направление движения; в исход¬ном положении все повторяется заново.
5. Создайте страничку, на которой по основному тексту "плавает" Ваше имя. Управление движением — при помощи экранных кнопок.
6. Создайте страничку, на которой по основному тексту "плавает" Ваше имя. Управление движением — при помощи кнопок клавиатуры.
7. Создайте страничку, на которой по основному тексту можно перетаскивать мышью Ваше имя.
8. Создайте страничку, на которой "Ваше имя" преследует курсор мыши.
9. Создайте страничку, на которой "Ваше имя" убегает от курсора мыши.
Буду очень благодарна если поможите.

Добавлено через 3 часа 30 минут
Здравствуйте! Помогите пожалуйста выполнить задания! Очень-очень прошу.

1. Создайте страничку, на которой по основному тексту "проплывает" Ваше имя. Алгоритм движения: текст двигается по заданной траектории; через некоторое время текст "скачком" возвращается в исходное положение и все повторяется.
Движение: Из нижнего правого угла в верхний левый, далее в просто вниз, далее в верхний правый угол.
2. Создайте страничку, на которой по основному тексту "проплывает" Ваше имя. Алгоритм движения: текст начинает двигаться по заданной траектории; через некоторое время текст меняет направление движения, доходит до исходного положения и все повторяется.
3. Создайте страничку, на которой по основному тексту "проплывает" ваше имя. Алгоритм движения: текст должен двигаться по косинусоиде сверху вниз и "скачком" возвращаться в исходное положение.
4. Создайте страничку, на которой по основному тексту "проплывает" Ваше имя. Алгоритм движения: текст должен двигаться по косинусоиде сверху вниз, затем менять направление движения; в исход¬ном положении все повторяется заново.
5. Создайте страничку, на которой по основному тексту "плавает" Ваше имя. Управление движением — при помощи экранных кнопок.
6. Создайте страничку, на которой по основному тексту "плавает" Ваше имя. Управление движением — при помощи кнопок клавиатуры.
7. Создайте страничку, на которой по основному тексту можно перетаскивать мышью Ваше имя.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
22.12.2015, 05:33
Tatsianasuslik, вы бы хоть задания свои переписали верно, а потом уже помощь просили

перечитайте тот бред, который вы два раза написали под пунктами 2 -- по какой-такой "заданной траектории" должно двигаться ваше имя? кем эта траектория задаётся, как эта траектория задаётся? и где находится "исходное положение"?
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
22.12.2015, 17:32
Tatsianasuslik, и ещё
почитайте правила форума, там чётко написано, что на 1 вопрос 1 тема
0
0 / 0 / 0
Регистрация: 12.02.2015
Сообщений: 7
22.12.2015, 19:25
во втором задании траектория движения такая же как и в первом задании.
снимок траектории я приложила.
Изображения
 
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
22.12.2015, 23:25
Tatsianasuslik, поясните -- сколько всего разных решений вы от нас ждёте? 9? 7? или 9 + 7 = 16?
0
0 / 0 / 0
Регистрация: 12.02.2015
Сообщений: 7
23.12.2015, 15:16
если есть возможность, помогите с первыми 6 задачами.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
23.12.2015, 16:19
Задача 6. Управление кнопками клавиатуры
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<title>6. Управление стрелками клавиатуры</title>
<style>
html, body {height: 100%; overflow: hidden; margin: 0}
p {text-align: justify; margin: 45px}
#myName {position: absolute; z-index: 5; font-size: 46px; font-weight: bold; color: red; visibility: hidden}
</style>
<script>
onload = function ()
{
with (document.body)
   {
   var W = clientWidth, H = clientHeight;
   onkeydown = function (e) {var e = window.event || e, k = e.keyCode; if (k == 37) dL = -5;
                                                                  else if (k == 38) dU = -5; 
                                                                  else if (k == 39) dR =  5;
                                                                  else if (k == 40) dB =  5}
 
   onkeyup = function (e)   {var e = window.event || e, k = e.keyCode; if (k == 37) dL =  0;
                                                                  else if (k == 38) dU =  0; 
                                                                  else if (k == 39) dR =  0;
                                                                  else if (k == 40) dB =  0}
var O = document.getElementById ('myName'); with (O) var w = offsetWidth, h = offsetHeight;
var Lmin = Tmin = dL = dU = dR = dB = 0, Lmax = W - w,
   Oleft = Lmax / 2, Tmax = H - h, Otop = Tmax / 2, p = 'px';
   with (O.style) left = Oleft + p, top = Otop + p, visibility = 'visible';
 
      function MoveText ()
      {
      Oleft += dL + dR; if (Oleft < Lmin) Oleft = Lmin; if (Oleft > Lmax) Oleft = Lmax;
      Otop  += dU + dB; if (Otop  < Tmin) Otop  = Tmin; if (Otop  > Tmax) Otop  = Tmax;
      with (O.style) left = Oleft + p, top = Otop + p;
      TMR = setTimeout (MoveText, 20);
      }
   }  
MoveText ();
}
</script>
</head>
<body>
<div id="myName">Tatsianasuslik</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
</body>
</html>
полюбоваться
0
0 / 0 / 0
Регистрация: 12.02.2015
Сообщений: 7
23.12.2015, 17:54
спасибо за решение)))

Добавлено через 30 минут
помогите пожалуйста и с первыми пятью заданиями.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
23.12.2015, 19:43
Задача 4. по косинусоиде сверху вниз, затем менять направление движения
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<title>4. по косинусоиде сверху вниз и обратно</title>
<style>
html, body {height: 100%; overflow: hidden}
p {margin: 45px}
#myName {position: absolute; z-index: 5; font-size: 64px; font-weight: bold; color: red}
</style>
<script>
onload = function ()
{
                                with (document.body) var W = clientWidth, H = clientHeight;
var O = document.getElementById ('myName'); with (O) var w = offsetWidth, h = offsetHeight;
var scaleL = offsetL = (W - w) / 2, scaleT = (H - h) / 8 / Math.PI, T = 0, dir = -1, p = 'px';
   function MoveText ()
   {
   with (O.style) top = T + p, left = (Math.cos (T * scaleT) * scaleL + offsetL) + p;
   if (!T || T == H - h) dir *= -1; T += dir; setTimeout (MoveText, 50);
   }
MoveText ();
}
</script>
</head>
<body>
<div id="myName">Tatsianasuslik</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<hr>
</body>
</html>
полюбоваться
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
23.12.2015, 20:11
kalabuni, ааааааа
мои глаза...

пожалуйста поставьте
CSS
1
#myName {position: absolute; z-index: 5; font-size: 64px; font-weight: bold; color: red; transition: all .5s linear;}
и
JavaScript
1
setTimeout (MoveText, 500)
а то это очень уж слишком быстро
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
23.12.2015, 20:11
Помогаю со студенческими работами здесь

Текст двигающийся посимвольно
Как возможно реализовать текст на подобии такого: Он нужен в таймер передвигается текст в окошке Пример: Hello World! текст ...

Двигающийся круг.
Помогите пожалуйста! Надо нарисовать круг и сделать так чтобы он двигался по Form1 и отбивался от стенок. С кругом я вроде справился но с...

Двигающийся человек
Привет всем , скиньте пожалуйста код двигающегося человека

Двигающийся прямоугольник
Думаю написать простятскую программулину, в которой просто движется прямоугольник, прямоугольник рисовать научился а так чтобы он...

Реализовать двигающийся объект
Составить программу на языке Pascal для решения задачи с использованием типа данных «объект» Нужно вот этот код сделать с типом данных...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Закрытая тема Создать тему
Новые блоги и статьи
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это дополнительная запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru