Heim >Web-Frontend >js-Tutorial >感觉很流畅的js实现的键盘控制（带惯性）_javascript技巧

感觉很流畅的js实现的键盘控制（带惯性）_javascript技巧

WBOYOriginal: 2016-05-16 19:12:081429Durchsuche

感觉很流畅的键盘控制（带惯性）

<div id="man" style="position:absolute;width:50px;height:40px;top:200px;left:200px;background:red"></div> 
<button onclick="alert(keyCache.length)">ask</button> 
 
<script> 
var keyCache = []; 
var isCache = false; 
var cacheNum = 0;

document.onkeydown = insertKey; 
document.onkeyup = function(){if(!isCache && event.keyCode>=37&& event.keyCode<=40) keyCache.length = 0;}

window.setInterval("writeCache()", 50);

function writeCache(){ 
    if(keyCache.length==0) return;

var kc = keyCache.shift();

switch(kc){ 
        case 37: man.style.left = parseInt(man.style.left) - 5;break; 
        case 38: man.style.top = parseInt(man.style.top) - 5;break; 
        case 39: man.style.left = parseInt(man.style.left) + 5;break; 
        case 40: man.style.top = parseInt(man.style.top) + 5;break; 
    }

if(isCache) cacheNum++; 
    if(cacheNum == 5){ 
        isCache = false; 
        cacheNum = 0; 
    } 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：List the Stored Procedures in a SQL Server database_图象特效Nächster Artikel：用jscript实现列出安装的软件列表_javascript技巧

In Verbindung stehende Artikel

Mehr sehen