练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#wrap{500px;height:500px;border: 1px solid green;margin:10px auto; position:relative;}
#wrap img{position:absolute;top:0;left:0;}

</style>
</head>
<body>

    <div id="wrap">按Q统计步数~
        <img id="ren" src="images/b1.gif" alt="">
    </div>
    <script>


        // 获取小人的对象
        var Ren = document.getElementById('ren');

        // 绑定键盘按下的事件
        document.onkeydown = function(event){

            //    处理兼容性的问题
            var e = window.event || event;

            // 设置人 每次移动的步长
            var step = 10;

            /*
                w-87   s-83   a-65   d-68
            */
            switch (e.keyCode) {
                case 87: // 上
                    Ren.style.top = Math.max(0,Ren.offsetTop-step)+'px';
                    // Ren.style.top = Ren.offsetTop-step+'px';
                    changeImg('u1.gif','u2.gif');
                    break;
                case 83: // 下
                    // alert(Ren.offsetTop);  当前top 值
                    // Ren.style.top = Ren.offsetTop+step+'px';
                    // 向下的边界 top 470  如果470 大  就取470
                    Ren.style.top = Math.min(470,Ren.offsetTop+step)+'px';
                    changeImg('b1.gif','b2.gif');
                    break;
                case 65: // 左
                    // Ren.style.left = Ren.offsetLeft-step+'px';
                    Ren.style.left = Math.max(0,Ren.offsetLeft-step)+'px';
                    changeImg('l1.gif','l2.gif');
                    break;
                case 68: // 右
                    // Ren.style.left = Ren.offsetLeft+step+'px';
                    Ren.style.left = Math.min(470,Ren.offsetLeft+step)+'px';
                    changeImg('r1.gif','r2.gif');
                    break;
                case 81:
                    alert('您一共走了'+i+'步~');
            }
        }


        // // 换图方法
        // function changeImg(img1,img2){
        //     // 从绝对路径中截取 文件名
        //     var newTu = Ren.src.substr(Ren.src.lastIndexOf('/')+1);
        //     // 根据方向来确定显示的图片
        //     if(newTu == img1){
        //         Ren.src = 'images/'+img2;
        //     }else{
        //         Ren.src = 'images/'+img1;
        //     }
        // }
        var i = 0;
        function changeImg(img1, img2){
            if(i%2==0){ //或许只写i%2也是对的
                Ren.src = 'images/'+img2;
            }else{
                Ren.src = 'images/'+img1;
            }
            i++;
        }
    </script>
在线地址：http://yupinghua.com/practices/components/%E5%B0%8F%E4%BA%BA%E7%A7%BB%E5%8A%A8.html