JS實(shí)現(xiàn)元素上下左右移動(dòng)效果
更新時(shí)間：2017年10月18日 15:58:20 作者：spfLinux
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)元素上下左右移動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)元素上下左右移動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下
<!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>
<div id="cell"></div>
<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 因?yàn)閍.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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄獪\談js的ajax的異步和同步請求的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
走進(jìn)javascript——不起眼的基礎(chǔ)，值和分號
本文主要介紹了javascript的基礎(chǔ)知識(shí)--值和分號，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
JavaScript聲明變量的這四兄弟(var、let、function、const)
這篇文章主要介紹了JavaScript聲明變量的這四兄弟，主要就是介紹var、let、function、const區(qū)別,需要的朋友可以參考下2023-02-02
詳解JavaScript發(fā)送埋點(diǎn)請求的兩種方式
對于發(fā)送埋點(diǎn)請求這種應(yīng)用場景，我們有兩種簡單的處理方式：動(dòng)態(tài)創(chuàng)建<script>和<img>兩種方式。本文就詳細(xì)講講二種方式的實(shí)現(xiàn)，需要的可以參考一下2022-06-06
基于JavaScript實(shí)現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)
本文給大家介紹javascript實(shí)現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)的相關(guān)知識(shí)，本文實(shí)用性非常高，代碼簡單易懂，需要的朋友參考下吧2016-01-01
JavaScript中forEach和map詳細(xì)講解
foreach和map都是JavaScript中數(shù)組的常用方法,它們都可以對數(shù)組中的每個(gè)元素執(zhí)行一個(gè)函數(shù),但是它們有一些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript模擬鼠標(biāo)右鍵菜單效果的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
使用Javascript（簡稱JS）取得LI里的內(nèi)容(簡單易懂的代碼實(shí)例)2008-12-12
Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài))
這篇文章主要介紹了Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài)) 的相關(guān)資料,還給大家介紹了在Bootstrap框架中提供的機(jī)制驗(yàn)證效果，非常不錯(cuò)，需要的朋友可以參考下2016-08-08
作用域JavaScript 的變量作用域是按照函數(shù)劃分的，為了快速的了解它的特性，我們通過實(shí)例來進(jìn)行演示。2009-08-08