Javascript.RU

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

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

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

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

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

нажатие нескольких клавиш
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, 13:27
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

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

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

Poznakomlus,
я бы предпочёл сейчас addEventListener и event.code, код выше рассматривайте, как вариант проверки алгоритма на скорую руку.
Ответить с цитированием
  #10 (permalink)  
Старый 30.04.2020, 02:20
Интересующийся
Отправить личное сообщение для Toban Посмотреть профиль Найти все сообщения от Toban
 
Регистрация: 25.03.2020
Сообщений: 11

Ребят, подскажите. Можно ли сделать перемещение объекта (картинки например) в заданном направлении. То есть возможность двигаться вперед или назад, и есть возможность вращать объект тем самым указывая направление.

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

<div>
<img src="https://inkscape.paint-net.ru/img/img02/1020037.png" id="Image" style="height: 50px;
width: 50px;">
</div>
<script>
window.onload = function() {
let body = document.getElementById('Image');
let angle=0;
let move=0;

function runOnKeys(func, ...codes) {
let pressed = new Set();
document.addEventListener('keydown', function(event) {
pressed.add(event.code);
for (let code of codes) { // все ли клавиши из набора нажаты?
if (!pressed.has(code)) {return;}
}
pressed.clear();
func();
});
document.addEventListener('keyup', function(event) {
pressed.delete(event.code);
});
}

function RotateRight()
{
angle++;
body.style.transform= "rotate(" + angle + "deg) translateY(" + move + "px)";  
}
function RotateLeft()
{
angle--;
body.style.transform= "rotate(" + angle + "deg) translateY(" + move + "px)";  
}
function Move(){
move--;
body.style.transform= "rotate(" + angle + "deg) translateY(" + move + "px)"; }

runOnKeys(RotateRight,"KeyE");
runOnKeys(RotateLeft,"KeyQ");
runOnKeys(Move,"KeyW");

}</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как создать новостную ленту 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 19.01.2014 01:16
Новый элемент отсутствует в DOM модели StrSprut jQuery 4 19.09.2011 12:50