Question

我一直在寻找一种解决方案，当按住一个键时，该解决方案允许我在div中更改css属性。

我试图通过使用向左和向右箭头来移动角色，但是当按下键时我无法使其移动，现在只是在按下并释放右键时它才移动。

这是我的代码：

$(document).keydown(function(e) {
  switch (e.which) {
    case 37: //left arrow key
      $("#matteo-walking").css("left", "-150px");
      break;
    case 39: //right arrow key
      $("#matteo-walking").css("left", "-150px");
      $("#matteo-walking").css("left", "0px");
      $("#matteo-walking").css("left", "-150px");
      break;
  }
});

$(document).keyup(function(e) {
  switch (e.which) {
    case 37: //left arrow key
      $("#matteo-walking").css("left", "-150px");
      break;
    case 39: //right arrow key
      $("#matteo-walking").css("left", "0px");
      break;
  }
});

#matteo-container {
  position: absolute;
  left: 50%;
  bottom: 150px;
}

#matteo-character {
  position: relative;
  left: -50%;
  width: 150px;
  height: 200px;
  overflow: hidden;
}

#matteo-walking {
  background: url('http://www.matteoschiatti.it/fancycv/images/matteo-walking.png');
  position: absolute;
  height: 200px;
  width: 300px;
  left: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="matteo-container">
  <div id="matteo-character">
    <div id="matteo-walking"></div>
  </div>
</div>

在这个阶段，即使我按下并释放右按钮，角色也会不断移动腿部，当我按下该按钮时，是否有办法获得相同的结果？我在想类似的东西：每X px左属性返回0px，然后X px之后，左属性变为-150px然后一次又一次，但是我不确定这是否是正确的方法以及如何做到这一点，因为我也必须考虑一下角色的回归。

这里是小提琴：

https://jsfiddle.net/matteous1/uvf2qrds/1/

Answer 1

您可以尝试以下小提琴吗？我也是根据您的作品创作的。

https://jsfiddle.net/abinthaha/uvf2qrds/71/

var currentPosition = 0;
var moveVal = 25;
$(document).keydown(function(e){
    switch (e.which){
    case 37:    //left arrow key
                currentPosition += moveVal;
        break;
    case 39:    //right arrow key
                currentPosition -= moveVal;
        break;
    }
        startMovement();
        setBgPos(currentPosition);
});

$(document).keyup(function(e){
    endMovement()
});

function startMovement() {
    $('#matteo-walking').addClass('movement');
}

function endMovement() {
    $('#matteo-walking').removeClass('movement');
}

function setBgPos(currentPosition) {
    $('#matteo-container').css('background-position', currentPosition + 'px -300px');
}

谢谢

Answer 2

我想你快到了。我设法通过使用事件侦听器来进行击键和击键以及重置位置来使其工作。我的答案基于this article

position = 0
document.addEventListener('keydown', function(event) {
   console.log(event.code)
   handleMovement(event);
});

document.addEventListener('keyup', function(event) {
   console.log('stopped')
   handleStop(event);
});

function handleMovement(e) {
  if (event.code == 'ArrowLeft') {
    position -= 150
    let newPosition = position + 'px'
    console.log(newPosition)
    $("#matteo-walking").css("left", newPosition);
    $("#matteo-character").css("left", '-50%');
  }
  if (event.code == 'ArrowRight') {
    position -= 150
    let newPosition = position + 'px'
    console.log(newPosition)
    $("#matteo-walking").css("left", newPosition);
    $("#matteo-character").css("left", '50%');
  }
}

function handleStop(e) {
  position = 0
  $("#matteo-walking").css("left", "0px");
}

请参见JSFiddle

Answer 3

我拿了你的代码并做了一些安排，现在就走了：）

Css（添加类）：

.step-position
{
   background-position-x : -150px !important;
}

Javascript：

$(document).keydown(function(e){
 switch (e.which){
    case 37:    //left arrow key
     animateStep();
     break;
    case 39:    //right arrow key
     animateStep();
     break;
   }
});

$(document).keyup(function(e){
switch (e.which){
case 37:    //left arrow key
    moveStep(false);
    break;
case 39:    //right arrow key
    moveStep(true);
    break;
}
});

function animateStep()
{
  $("#matteo-walking").addClass('step-position');
  setTimeout(function(){$("#matteo-walking").removeClass('step-position');},100);
}

function moveStep(forward)
{
  var step = 30;
  var distance = $("#matteo-character").css("left").replace("px","") * 1;

  if(forward)
  { 
    distance += step;
  }
  else
  {
    distance -= step;
  }

  $("#matteo-character").css("left",distance + "px");
}

请参见JS Fiddle

按下一个键时继续移动元素jQuery

3 个答案: