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>友情提示：請(qǐng)按鍵盤上的上下左右鍵</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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了倒記時(shí)60刷新網(wǎng)頁(yè)的js代碼,需要的朋友可以參考下2014-02-02
學(xué)習(xí)JavaScript設(shè)計(jì)模式之狀態(tài)模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的狀態(tài)模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
微信小程序?qū)崿F(xiàn)比較功能的方法匯總(五種方法)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)比較功能的方法，本文給大家列舉出五種方式，每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
TypeScript魔法堂之枚舉的超實(shí)用手冊(cè)
這篇文章主要介紹了TypeScript魔法堂之枚舉的超實(shí)用手冊(cè)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了JS中判斷null的方法,結(jié)合實(shí)例形式對(duì)比分析了常見的JS錯(cuò)誤判斷方法及正確判斷操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
JS簡(jiǎn)單實(shí)現(xiàn)父子窗口傳值功能示例【未使用iframe框架】
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)父子窗口傳值功能,結(jié)合具體實(shí)例形式分析了javascript實(shí)現(xiàn)不使用iframe框架進(jìn)行窗口之間簡(jiǎn)單傳值的相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
小程序?qū)崿F(xiàn)簡(jiǎn)單的計(jì)算器
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單的計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
ThingJS粒子特效一鍵實(shí)現(xiàn)雨雪效果
在做3D項(xiàng)目時(shí)，我們經(jīng)常需要模擬下雨，下雪的天氣，有時(shí)也會(huì)模擬噴泉、著火等效果。這些效果需要使用名為粒子系統(tǒng)(particle)的技術(shù)來實(shí)現(xiàn)。使用ThingJS可以快速編寫粒子效果，本文就來看看如何實(shí)現(xiàn)2021-05-05
js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法
這篇文章主要介紹了js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法,實(shí)例分析了javascript處理鼠標(biāo)事件及文字特效的技巧,需要的朋友可以參考下2015-02-02
javascript中parseInt()函數(shù)的定義和用法分析
這篇文章主要介紹了javascript中parseInt()函數(shù)的定義和用法,較為詳細(xì)的分析了parseInt()函數(shù)的定義及具體用法,以及參數(shù)使用時(shí)的注意事項(xiàng),需要的朋友可以參考下2014-12-12