简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

JS实现元素上下左右移动

小云云
Lepaskan： 2018-01-09 13:29:16
asal
2856 orang telah melayarinya

本文主要为大家详细介绍了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 + &#39;px&#39;; 
     //注意要用parseInt 因为a.style.top类型是字符串 
    } 
    if(e.keyCode == 40) { //down 
     a.style.top = parseInt(a.style.top) + 50 + &#39;px&#39;; 
    } 
    if(e.keyCode == 37) { //left 
     a.style.left = parseInt(a.style.left) - 50 + &#39;px&#39;; 
    } 
    if(e.keyCode == 39) { //right 
     a.style.left = parseInt(a.style.left) + 50 + &#39;px&#39;; 
    } 
   } 
  } 
 </script> 
</body> 
</html>
Salin selepas log masuk

相关推荐：

JavaScript Select和Option列表元素上下左右移动_表单特效

使用js获取伪元素的content实例分享

jQuery remove()过滤被删除的元素详解

Atas ialah kandungan terperinci JS实现元素上下左右移动. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
javascript 元素
sumber：php.cn
Artikel sebelumnya：vue使用axios跨域请求数据实例详解 Artikel seterusnya：JS去掉字符串中所有的逗号实例详解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Strim data daripada API OpenAI menggunakan AJAX, PHP dan acara yang dihantar oleh pelayan Bagaimanakah saya boleh menggunakan Acara Dihantar Pelayan (SSE) untuk menstrim data darip...
daripada 2023-11-11 12:03:23
0
1
497
Ralat Jenis Tidak Ditangkap: Tidak dapat menetapkan sifat yang tidak ditentukan (tetapkan 'innerHTML') Saya cuba membuat halaman web menggunakan php, pada elemen kelas "Continuous TextBox&...
daripada 2023-11-08 21:06:09
0
1
278
Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript Saya telah mencipta objek Javascript yang dipanggil [name-rgb]. Asas anda:namedColors={Ali...
daripada 2023-11-06 09:05:50
0
2
210
Mengapa begitu banyak skrip JavaScript menambahkan nombor rawak pada sesuatu? perlanggaran? Saya telah mempelajari JavaScript sejak kebelakangan ini dan telah melihat banyak contoh p...
daripada 2023-11-04 20:00:04
0
2
296
Kenal pasti had prestasi dalam JavaScript Saya cuba mencari kesesakan dalam Javascript saya. Pada asasnya saya sedang membangunkan s...
daripada 2023-10-31 20:47:17
0
1
229
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！