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