Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2020, 23:12
Новичок на форуме
Отправить личное сообщение для gunner17 Посмотреть профиль Найти все сообщения от gunner17
 
Регистрация: 06.03.2019
Сообщений: 8

Плавно переместить DOM-элемнты
Подскажите, как правильно по событию (а именно по keydown/keyup) плавно и без задержек перемещать элементы (div) по странице? Необходим ли requestanimationframe? Изменяю style.top/left по нажатию клавиши или нужно использовать свойство transform?
Подскажите пример если есть?)
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2020, 23:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,140

gunner17,
https://javascript.ru/forum/jquery/5...tml#post358252
Ответить с цитированием
  #3 (permalink)  
Старый 19.02.2020, 01:12
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,602

рони, ну прям классический случай, где скорость перемещения зависит от частоты обновления экрана.)
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 19.02.2020, 01:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,140

вариант от Malleys
https://javascript.ru/forum/events/7...tml#post511091
Ответить с цитированием
  #5 (permalink)  
Старый 19.02.2020, 01:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,140

нажатие нескольких клавиш
Aetae,
попытка уйти от зависимости ))) скорость 120 пикселей в секунду.
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    body,html{background:#FC9;height:100%}
    div{height:100px;width:100px;background:#006400;position:relative;left:200px;top:200px}
    </style>
    <script>
window.onload = function() {
        function move(t) {
                for (var a in c)
                        if (c[a]) {
                                var d = b[a][0];
                                b[d] += (t - c[a])/1000 * b[a][1];
                                c[a] = t;
                                div.style[d] = (b[d]|0) + "px"
                        }
                window.requestAnimationFrame(move)
        }
        var b = {
                        39: ["left", 120],
                        37: ["left", -120],
                        40: ["top", 120],
                        38: ["top", -120],
                        left: 200,
                        top: 200
                },
                c = {};
        window.requestAnimationFrame(move);
        var div = document.getElementById("show");
        document.body.onkeydown = function(a) {
                a = a || window.event;
                a = a.keyCode;
                a in b && (c[a] = performance.now());
        };
        document.body.onkeyup = function(a) {
                a = a || window.event;
                a = a.keyCode;
                a in b && (c[a] = false);
        }
};
</script>
</head>

<body>
<div id="show" ></div>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 19.02.2020, 12:27
Аватар для Poznakomlus
Профессор
Отправить личное сообщение для Poznakomlus Посмотреть профиль Найти все сообщения от Poznakomlus
 
Регистрация: 13.03.2013
Сообщений: 1,337

рони,
a,b,c ??? несколько лет одно и то-же
сборщик или скрипт минификации всегда сможет это сделать
когда уже привычка выроботается
Ответить с цитированием
  #7 (permalink)  
Старый 19.02.2020, 12:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,140

Poznakomlus,
в старом коде изменено пара строк, каким образом код должен был поменяться?
Ответить с цитированием
  #8 (permalink)  
Старый 19.02.2020, 12:35
Аватар для Poznakomlus
Профессор
Отправить личное сообщение для Poznakomlus Посмотреть профиль Найти все сообщения от Poznakomlus
 
Регистрация: 13.03.2013
Сообщений: 1,337

document.body.onkeydown = function(a)
document.body.onkeydown = function(event)
Ответить с цитированием
  #9 (permalink)  
Старый 19.02.2020, 12:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,140

Poznakomlus,
я бы предпочёл сейчас addEventListener и event.code, код выше рассматривайте, как вариант проверки алгоритма на скорую руку.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как создать новостную ленту misha.korolcov Элементы интерфейса 10 23.10.2019 18:34
Parent DOM не видит подгруженный Child DOM alixan23 Элементы интерфейса 8 08.05.2018 17:16
Как переместить DOM элемент? AntonMs Общие вопросы Javascript 6 07.08.2015 18:44
инициализация плагинов до вставки html-я в DOM FanAizu jQuery 3 18.01.2014 23:16
Новый элемент отсутствует в DOM модели StrSprut jQuery 4 19.09.2011 11:50