Home > Article > Web Front-end > How to use jQuery to control div blocks to move up, down, left, and right through arrow keys
How to use jQuery to control div blocks to move up, down, left, and right through arrow keys
- php中世界最好的语言Original
- 2018-06-02 10:03:491363browse
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;
}
});
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>
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!
Recommended reading:
How to use Vue to achieve drag and drop effect
The above is the detailed content of How to use jQuery to control div blocks to move up, down, left, and right through arrow keys. For more information, please follow other related articles on the PHP Chinese website!