JS實現(xiàn)可以用鍵盤方向鍵控制的動畫
更新時間：2020年12月11日 14:24:10 作者：KindleYoung
這篇文章主要為大家詳細介紹了JS實現(xiàn)可以用鍵盤方向鍵控制的動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用JS寫一個可以用鍵盤方向鍵控制的動畫：
效果如下：
好了，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
overflow: hidden
}
img {
position: absolute;
top: 0;
left: 10px;
width: 100px;
height: 82px
}
.right {
transform: rotateY(180deg)
}
.top {
transform: rotateZ(45deg)
}
.bottom {
transform: rotateZ(-45deg)
}
</style>
</head>
<body>
<img src="./img//Blue ocean11.png" alt="" class="move-background">
<script>
var oImg = document.querySelector("img");
/* 思路： */
/* 監(jiān)聽鍵盤的事件(<- -> 上 下) */
document.onkeydown = function(e) {
e = e || window.event;
var code = e.which || e.keyCode;
var offset = 10;
switch (code) {
case 37:
console.log("left");
console.log('innerWidth',innerWidth,oImg.offsetLeft);
oImg.className = "";
var left = oImg.offsetLeft - offset;
if (left <= -oImg.offsetWidth) {
left = window.innerWidth;
}
oImg.style.left = left + "px";
break;
case 38:
console.log("top");
oImg.className = "top";
var top = oImg.offsetTop - offset;
if (top <= -oImg.offsetHeight) {
top = window.innerHeight;
}
oImg.style.top = top + "px";
break;
case 39:
console.log("right");
oImg.className = "right";
var left = oImg.offsetLeft + offset;
if (left >= window.innerWidth) {
left = -oImg.offsetWidth;
}
oImg.style.left = left + "px";
break;
case 40:
console.log("bottom");
oImg.className = "bottom";
var top = oImg.offsetTop + offset;
if (top >= window.innerHeight) {
top = -oImg.offsetHeight;
}
oImg.style.top = top + "px";
break;
default:
break;
}
/* 臨界值檢查 */
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
拖拽是前端實現(xiàn)中比較常用的一種效果, HTML5 提供了較為強大的拖拽 API 支持,今天我們來實現(xiàn)一個簡單的拖拽效果,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JS中 new Date() 各方法的用法,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
本文主要對Array和String方法進行總結(jié)，每一部分總結(jié)后有實例代碼，代碼中黃色框方法不改變原數(shù)組。PS:所有實例結(jié)果均一一運行所得。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
深入理解JavaScript系列（26）：設計模式之構造函數(shù)模式詳解
這篇文章主要介紹了深入理解JavaScript系列（26）：設計模式之構造函數(shù)模式詳解,本文講解了基本用法、構造函數(shù)與原型、只能用new嗎？、強制使用new、原始包裝函數(shù)等內(nèi)容,需要的朋友可以參考下2015-03-03
詳解JS中continue關鍵字和break關鍵字的區(qū)別
在javascript中continue的作用是退出當前次循環(huán)，break的作用則是一旦當前循環(huán)有break那么直接退出整個循環(huán)。本文將通過一些示例為大家詳細講講二者的區(qū)別，感興趣的可以了解一下2022-08-08
這篇文章主要給大家介紹了關于對async?await效率問題的深入思考,async和await要搭配Promise使用,它進一步極大的改進了Promise的寫法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了JS動態(tài)設置頁面高度的操作代碼,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-04-04
JavaScript中split與join函數(shù)的進階使用技巧
這篇文章主要介紹了JavaScript中split與join函數(shù)的進階使用技巧,split和join通常被用來操作數(shù)組和字符串之間的轉(zhuǎn)換,需要的朋友可以參考下2016-05-05
Cookie就是這樣的一種機制。它可以彌補HTTP協(xié)議無狀態(tài)的不足。在Session出現(xiàn)之前，基本上所有的網(wǎng)站都采用Cookie來跟蹤會話。下面通過本文給大家介紹JS中cookie的使用及缺點，需要的朋友參考下吧2017-05-05
解決layer彈出層的內(nèi)容頁點擊按鈕跳轉(zhuǎn)到新的頁面問題
今天小編就為大家分享一篇解決layer彈出層的內(nèi)容頁點擊按鈕跳轉(zhuǎn)到新的頁面問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09