ホームページ > 記事 > ウェブフロントエンド > 感觉很流畅的js实现的键盘控制（带惯性）_javascript技巧

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

WBOYオリジナル: 2016-05-16 19:12:081395ブラウズ

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

<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需刷新才能执行]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：List the Stored Procedures in a SQL Server database_图象特效次の記事：用jscript实现列出安装的软件列表_javascript技巧

続きを見る

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

関連記事