화살표 키를 통해 div가 위, 아래, 왼쪽, 오른쪽으로 이동하도록 제어하는 ​​jQuery의 단계에 대한 자세한 설명

이번에는 jQuery를 사용하여 화살표 키를 통해 div를 위, 아래, 왼쪽, 오른쪽으로 이동하는 단계에 대해 자세히 설명합니다. 화살표 키를 통해 위, 아래, 왼쪽, 오른쪽으로 이동합니다. 실제 사례를 살펴보겠습니다. CSS에서 DOM 요소의 <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>

속성이 절대 또는 상대인 경우 를 변경할 수 있습니다. 요소 left 및 top 속성의 특정 값은 페이지에서 요소가 나타나는 위치를 제어합니다.

<a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>属性为absolute或relative时，我们可以通过改变这个元素的left和top属性的具体值来控制元素在页面中显现的位置。

利用上述属性，我们可以简单实现一个元素在页面中的移动效果，这里我们采用JQuery的animate方法来实现动画效果，利用keydown监听方向键按下的事件（这里采用keydown而不是keyup，是为了能够在方向键被一直按着时，元素一直移动，keydown是监听按下事件，keyup是监听按键释放事件）。这里我们还可以利用animate위 속성을 사용하면 페이지에서 요소의 이동 효과를 간단히 구현할 수 있습니다. 여기서는 JQuery의 animate 메서드를 사용하여 애니메이션 효과를 구현하고 keydown을 사용합니다. 방향 키를 모니터링합니다. (여기에서는 keyup 대신 keydown을 사용하므로 방향 키를 눌렀을 때 요소가 계속 움직일 수 있습니다. Keydown은 누른 이벤트를 모니터링하는 것입니다. keyup은 키 릴리스 이벤트를 모니터링하는 것입니다). 여기서는 animate 메소드의 기능을 활용할 수도 있습니다. 즉, 속성 값이 '+=' 또는 '-='인 경우 먼저 원래 값을 기준으로 계산합니다. , 그리고 해당 속성이 주어지면 이는 C++의 연산자와 일치합니다.

핵심 코드는 다음과 같습니다.

$(document).keydown(function(event){
    var keyNum = event.which;  //获取键值
    var Item = $('#switcher');  //要移动的元素
    Item.css({position:'relative'}); //设置position
    switch(keyNum){ //判断按键
    case 37: Item.animate({left:'-=20px'});break;
    case 38: Item.animate({top:'-=20px'});break;
    case 39: Item.animate({left:'+=20px'});break;
    case 40: Item.animate({top:'+=20px'});break;
    default:
      break;
    }
});

전체 샘플 코드는 다음과 같습니다.

<script>
$(document).keydown(function(event){
    var keyNum = event.which;  //获取键值
    var Item = $(&amp;#39;#switcher&amp;#39;);  //要移动的元素
    Item.css({position:&amp;#39;relative&amp;#39;}); //设置position
    switch(keyNum){ //判断按键
    case 37: Item.animate({left:&amp;#39;-=20px&amp;#39;});break;
    case 38: Item.animate({top:&amp;#39;-=20px&amp;#39;});break;
    case 39: Item.animate({left:&amp;#39;+=20px&amp;#39;});break;
    case 40: Item.animate({top:&amp;#39;+=20px&amp;#39;});break;
    default:
      break;
    }
});
</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!

추천 도서:

jQuery로 전자시계 기능을 구현하는 단계에 대한 자세한 설명

Vue nextTick 메커니즘 사용에 대한 자세한 설명

위 내용은 화살표 키를 통해 div가 위, 아래, 왼쪽, 오른쪽으로 이동하도록 제어하는 ​​jQuery의 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!