이 글은 주로 JS에서 요소를 위, 아래, 왼쪽, 오른쪽으로 이동하는 효과를 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { cursor: pointer; } #cell { width: 30px; height: 30px; background: red; position: relative; left: 0; top: 0; } </style> </head> <body onload="move()"> <p>友情提示:请按键盘上的上下左右键</p> <p id="cell"></p> <script> function move() { var a = document.getElementById("cell"); a.style.left = 0; a.style.top = 0; document.onkeydown = function(e) { var e = window.event ? window.event : e; if(e.keyCode == 38) { //up a.style.top = parseInt(a.style.top) - 50 + 'px'; //注意要用parseInt 因为a.style.top类型是字符串 } if(e.keyCode == 40) { //down a.style.top = parseInt(a.style.top) + 50 + 'px'; } if(e.keyCode == 37) { //left a.style.left = parseInt(a.style.left) - 50 + 'px'; } if(e.keyCode == 39) { //right a.style.left = parseInt(a.style.left) + 50 + 'px'; } } } </script> </body> </html>
관련 권장 사항:
JavaScript 선택 및 옵션 목록 요소가 위, 아래, 왼쪽 및 오른쪽으로 이동_특수 효과를 형성합니다.
jQuery 제거( ) 삭제된 요소를 필터링합니다. 자세한 설명
위 내용은 JS는 위, 아래, 왼쪽, 오른쪽으로 움직이는 요소를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!