jQuery를 사용하여 div 블록을 제어하여 화살표 키를 통해 위, 아래, 왼쪽, 오른쪽으로 이동하는 방법-JS 튜토리얼-php.cn

jQuery를 사용하여 div 블록을 제어하여 화살표 키를 통해 위, 아래, 왼쪽, 오른쪽으로 이동하는 방법

php中世界最好的语言

풀어 주다： 2018-06-02 10:03:49

원래의

1446명이 탐색했습니다.

이번에는 jQuery를 사용하여 화살표 키를 통해 div 블록을 상하좌우로 이동하는 방법과 jQuery를 사용하여 div 블록을 상하좌우로 이동하는 방법을 보여드리겠습니다. 주의사항은 무엇인가요? 다음은 실제 사례를 살펴보겠습니다.

CSS에서 DOM 요소의 <a href="http://www.php.cn/wiki/902.html" target="_blank">position<p style="text-align: left;"></p></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;
    }
});

로그인 후 복사

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery控制p移动</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<p id="switcher" style="width:200px;height:200px;border:solid 1px #000;">
</p>
<script>
$(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>
</body>
</html>

로그인 후 복사

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