How to use jQuery to control div blocks to move up, down, left, and right through arrow keys-JS Tutorial-php.cn

How to use jQuery to control div blocks to move up, down, left, and right through arrow keys

php中世界最好的语言

Release： 2018-06-02 10:03:49

Original

1441 people have browsed it

This time I will show you how to use jQuery to control the div block to move up, down, left, and right through the arrow keys, and how to use jQuery to control the div block to move up, down, left, and right through the arrow keys. Precautions What are they? Here are actual cases. Let’s take a look.

In CSS, when the <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a> attribute of the DOM element is absolute or relative, we can change this The specific values of the left and top attributes of the element control the position where the element appears on the page.

Using the above attributes, we can simply realize the movement effect of an element on the page. Here we use JQuery's animate method to achieve the animation effect and use keydown to monitor The event of pressing the direction key ( uses keydown instead of keyup here so that the element can keep moving while the direction key is pressed. Keydown listens for the press event, and keyup listens for the key release event.) . Here we can also take advantage of a feature of the animate method, which is that when the value of its attribute is '=' or '-=', it will first calculate based on the original value and then assign it to the corresponding Attribute, this is consistent with C's operator.

The core code is as follows:

$(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;
    }
});

Copy after login

The complete sample code is as follows:

<!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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!