jQuery는 화살표 키를 사용하여 layer_jquery의 위, 아래, 왼쪽 및 오른쪽 이동을 제어합니다.

질문: 방향 키를 누르면 레이어가 해당 방향으로 20픽셀씩 부드럽게 이동합니다. 네 방향 키의 키 코드는 37(왼쪽), 38(위)입니다. ), 39(오른쪽), 40(아래).

그런 다음 다음 코드를 작성했습니다 :

$div는 이동할 레이어이며, CSS에서는 위치가 상대 위치로 설정되어 있습니다. 얼핏 보면 문제가 없는 것 같은데, 실행해 보니 다음과 같은 문제가 발견되었습니다.

1. 눌렀다가 다시 올려도 반응이 없습니다.

2. 오른쪽을 누른 후 왼쪽을 눌러도 반응이 없습니다.

나중에 한 네티즌이 물어보니 문득 깨달았습니다.

눌렀을 때 위쪽 값이 20px인데 이때 위쪽 값도 20px인 것을 Firebug에서 볼 수 있는데, 브라우저 때문에 레이어가 위로 올라가지 않습니다. 먼저 상단을 구문 분석합니다. 즉, 하단 값이 무엇이든 {top:20px;bottom:100px} 및 {top:20px}는 동일합니다. 오른쪽을 누른 후 왼쪽을 눌러도 반응이 없는 이유이기도 합니다. 키가 왼쪽 값입니다.

그래서 코드를 바꿨어요 :

달린 후에는 예상대로 상하좌우 아무 문제 없습니다.