How to bind arrow keys to control div movement
Jun 04, 2018 pm 03:37 PM
This time I will show you how to bind the direction keys to control the movement of divs, and what are the precautions for binding the direction keys to control the movement of divs. The following is a practical case, let's take a look.
In CSS, when theposition<a href="http://www.miracleart.cn/wiki/902.html" target="_blank"></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.
animate method of JQuery to achieve the animation effect, using keydownListen to the event of pressing the direction key (Keydown is used here instead of keyup, so that the element can keep moving when the direction key is pressed. Keydown is to monitor the press event, and keyup is to monitor 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.
$(document).keydown(function(event){
????var?keyNum?=?event.which;??//獲取鍵值
????var?Item?=?$('#switcher');??//要移動(dòng)的元素
????Item.css({position:'relative'});?//設(shè)置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移動(dòng)</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');??//要移動(dòng)的元素
????Item.css({position:'relative'});?//設(shè)置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 does console print log information
The above is the detailed content of How to bind arrow keys to control div movement. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Can the appdata folder be moved to the D drive?
Feb 18, 2024 pm 01:20 PM
Can the appdata folder be moved to the D drive? With the increasing popularity of computer use, more and more users' personal data and applications are stored on the computer. In Windows operating system, there is a specific folder called appdata folder, which is used to store user's application data. Many users wonder whether this folder can be moved to the D drive or other disks for data management and security considerations. In this article, we will discuss this problem and provide some solutions. First, let me
Stop or allow this PC to access your mobile device on Windows 11
Feb 19, 2024 am 11:45 AM
Microsoft changed the name of PhoneLink to MobileDevice in the latest Windows 11 version. This change allows users to control computer access to mobile devices through prompts. This article explains how to manage settings on your computer that allow or deny access from mobile devices. This feature allows you to configure your mobile device and connect it to your computer to send and receive text messages, control mobile applications, view contacts, make phone calls, view galleries, and more. Is it a good idea to connect your phone to your PC? Connecting your phone to your Windows PC is a convenient option, making it easy to transfer functions and media. This is useful for those who need to use their computer when their mobile device is unavailable
Does 151 start with China Mobile or China Unicom?
Mar 06, 2023 am 11:43 AM
The number starting with 151 is the number segment of the mobile operator. 151 is one of the number blocks of China Mobile. It began to allocate numbers in 2008. It is also the fourth number block that does not start with "13" after the 158, 159, and 150 numbers. The purpose of opening the 151 block It is to alleviate the shortage of number resources.
The new king of domestic FPS! 'Operation Delta' Battlefield Exceeds Expectations
Mar 07, 2024 am 09:37 AM
"Operation Delta" will launch a large-scale PC test called "Codename: ZERO" today (March 7). Last weekend, this game held an offline flash mob experience event in Shanghai, and 17173 was also fortunate to be invited to participate. This test is only more than four months away from the last time, which makes us curious, what new highlights and surprises will "Operation Delta" bring in such a short period of time? More than four months ago, I experienced "Operation Delta" in an offline tasting session and the first beta version. At that time, the game only opened the "Dangerous Action" mode. However, Operation Delta was already impressive for its time. In the context of major manufacturers flocking to the mobile game market, such an FPS that is comparable to international standards
Using PHP to control the camera: analysis of the entire process from connection to shooting
Jul 30, 2023 pm 03:21 PM
Use PHP to control the camera: Analyze the entire process from connection to shooting. Camera applications are becoming more and more widespread, such as video calls, surveillance systems, etc. In web applications, we often need to control and operate cameras through PHP. This article will introduce how to use PHP to realize the entire process from camera connection to shooting. Confirm the connection status of the camera. Before starting to operate the camera, we first need to confirm the connection status of the camera. PHP provides an extension library video to operate the camera. We can pass the following code
Is the mobile number starting with 184 a virtual number?
Oct 25, 2022 pm 02:13 PM
Mobile 184 starts with the virtual operator's exclusive China Mobile number segment; the first three digits of the mobile phone number segment generally represent the network identification number, 4 to 7 digits represent the area code, and 8 to 11 digits are the user's unique number; in the assigned number segment At that time, numbers starting with 10 are service numbers for the telecommunications industry, such as 10000 Telecom Service Center, 10010 China Unicom Service Center, and 10086 Mobile Service Center; numbers starting with 11 are special service numbers, such as 110, 119, etc.
6000 mAh silicon negative battery! Xiaomi 15Pro upgrade leaked again
Jul 24, 2024 pm 12:45 PM
According to news on July 23, blogger Digital Chat Station broke the news that the battery capacity of Xiaomi 15 Pro has been increased to 6000mAh and supports 90W wired flash charging. This will be the Pro model with the largest battery in Xiaomi’s digital series. Digital Chat Station previously revealed that the battery of Xiaomi 15Pro has ultra-high energy density and the silicon content is much higher than that of competing products. After silicon-based batteries are tested on a large scale in 2023, second-generation silicon anode batteries have been identified as the future development direction of the industry. This year will usher in the peak of direct competition. 1. The theoretical gram capacity of silicon can reach 4200mAh/g, which is more than 10 times the gram capacity of graphite (the theoretical gram capacity of graphite is 372mAh/g). For the negative electrode, the capacity when the lithium ion insertion amount reaches the maximum is the theoretical gram capacity, which means that under the same weight
What are the levels of mobile user star ratings?
Oct 20, 2022 am 11:35 AM
Mobile user star ratings are divided into five levels: 1 star, 2 stars, 3 stars, 4 stars, and 5 stars. The five stars are further subdivided into five-star gold, five-star silver, and five-star diamond; the higher the star rating, the more The more service benefits you get. The star rating is assessed once a year and is valid for one year; if the star rating is adjusted, the star-rated services will be adjusted simultaneously.
