Плавно переместить 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, время: 07:03. |