Плавно переместить DOM-элемнты
Подскажите, как правильно по событию (а именно по keydown/keyup) плавно и без задержек перемещать элементы (div) по странице? Необходим ли requestanimationframe? Изменяю style.top/left по нажатию клавиши или нужно использовать свойство transform?
Подскажите пример если есть?) |
|
рони, ну прям классический случай, где скорость перемещения зависит от частоты обновления экрана.)
|
вариант от Malleys
https://javascript.ru/forum/events/7...tml#post511091 |
нажатие нескольких клавиш
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> |
рони,
a,b,c ??? :nono: несколько лет одно и то-же сборщик или скрипт минификации всегда сможет это сделать когда уже привычка выроботается |
Poznakomlus,
:-? в старом коде изменено пара строк, каким образом код должен был поменяться? |
document.body.onkeydown = function(a)
document.body.onkeydown = function(event) |
Poznakomlus,
я бы предпочёл сейчас addEventListener и event.code, код выше рассматривайте, как вариант проверки алгоритма на скорую руку. |
Ребят, подскажите. Можно ли сделать перемещение объекта (картинки например) в заданном направлении. То есть возможность двигаться вперед или назад, и есть возможность вращать объект тем самым указывая направление.
Есть пробный код. Но проблема заключается в том что после перемещения объект уже не вращается а крутится вокруг начальной точки. <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> |
Часовой пояс GMT +3, время: 00:23. |