利用js键盘事件制作会移动效果

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_30402343

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量111

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/taohuaya/p/9594040.html

版权

会移动的方块

描述按键盘上的方向键方块会移动，按住alt键和方向键进行大幅度移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会移动的方块（按方向键或alt加方向键）</title>
    <style>
        * {margin: 0;padding: 0;}
        div {width: 200px;height: 200px;position: absolute;background:cyan;}
    </style>
    <script>
    /*
        分析
        左 对应的键码keyCode：37
        上 对应的键码keyCode：38
        右 对应的键码keyCode：39
        下 对应的键码keyCode：40


     */
        window.onload = function(){
            var oDiv = document.getElementById('div');
            window.onkeydown = function(ev){
                var e = ev || window.event;
                //alert(e.keyCode);//查看键码
                var speed = 10; //每次变化的数
                //判断是否按下alt键,如果按下每次增加的数度翻十倍
                if(e.altKey){
                    speed *= 10;
                }
                switch(e.keyCode){
                    //左
                    case 37:     
                        //获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
                        var current = parseInt(getStyle(oDiv, 'left'));
                        //每次有效样式减10px
                        oDiv.style.left = current - speed + 'px';
                        break;
                    //上
                    case 38:     
                        //获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
                        var current = parseInt(getStyle(oDiv, 'top'));
                        //每次有效样式减10px
                        oDiv.style.top = current - speed + 'px';
                        break;
                    //右
                    case 39:     
                        //获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
                        var current = parseInt(getStyle(oDiv, 'left'));
                        //每次有效样式加10px
                        oDiv.style.left = current + speed + 'px';
                        break;
                    //下
                    case 40:     
                        //获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
                        var current = parseInt(getStyle(oDiv, 'top'));
                        //每次有效样式加10px
                        oDiv.style.top = current + speed + 'px';
                        break;
                }
            }

        }

        /*------封装获取当前有效样式的函数---------*/
            function getStyle(node, styleType){
                return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
            }


        /*------封装获取当前有效样式的函数end---------*/

    </script>
</head>
<body>
    <div id="div"></div>
</body>
</html>

浏览器效果：

才此基础上插入一个背景图加以修饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会移动的凤凰（按方向键或alt加方向键）</title>
    <style>
        * {margin: 0;padding: 0;}
        div {width: 293px;height: 220px;position: absolute;background:url(fenghuang1.gif);}
    </style>
    <script>
    /*
        分析
        左 对应的键码keyCode：37
        上 对应的键码keyCode：38
        右 对应的键码keyCode：39
        下 对应的键码keyCode：40


     */
        window.onload = function(){
            var oDiv = document.getElementById('div');
            window.onkeydown = function(ev){
                var e = ev || window.event;
                //alert(e.keyCode);//查看键码
                var speed = 10; //每次变化的数
                //判断是否按下alt键,如果按下每次增加的数度翻十倍
                if(e.altKey){
                    speed *= 10;
                }
                switch(e.keyCode){
                    //左
                    case 37:     
                        //获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
                        var current = parseInt(getStyle(oDiv, 'left'));
                        //每次有效样式减10px
                        oDiv.style.left = current - speed + 'px';
                        //按下  左时 div第transform 都等于 逆时针180度
                        oDiv.style.transform = 'rotate(-180deg)';
                        break;
                    //上
                    case 38:     
                        //获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
                        var current = parseInt(getStyle(oDiv, 'top'));
                        //每次有效样式减10px
                        oDiv.style.top = current - speed + 'px';
                        //按下  上时 div第transform 都等于 逆时针90度
                        oDiv.style.transform = 'rotate(-90deg)';
                        break;
                    //右
                    case 39:     
                        //获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
                        var current = parseInt(getStyle(oDiv, 'left'));
                        //每次有效样式加10px
                        oDiv.style.left = current + speed + 'px';
                        //按下  右时 div第transform 都等于 逆时针0度
                        oDiv.style.transform = 'rotate(0deg)';
                        break;
                    //下
                    case 40:     
                        //获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
                        var current = parseInt(getStyle(oDiv, 'top'));
                        //每次有效样式加10px
                        oDiv.style.top = current + speed + 'px';
                        //按下  右时 div第transform 都等于 顺时针90度
                        oDiv.style.transform = 'rotate(90deg)';
                        break;
                }
            }

        }

        /*------封装获取当前有效样式的函数---------*/
            function getStyle(node, styleType){
                return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
            }


        /*------封装获取当前有效样式的函数end---------*/

    </script>
</head>
<body>
    <div id="div"></div>
</body>
</html>

浏览器效果：

使用到的图片：

转载于:https://www.cnblogs.com/taohuaya/p/9594040.html

weixin_30402343

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用js键盘事件制作会移动效果

会移动的方块描述按键盘上的方向键方块会移动，按住alt键和方向键进行大幅度移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>会移动的方块（按方向键或alt加方向键）</title> ...
复制链接

扫一扫