jQuery制作一个小人移动的效果

 要想制作一个小人鼠标和键盘移动小人的一个效果，需要一张小人的图片然后在CSS中为这张小人图片进行定位，然后获取小人在页面中的距离，

实现键盘事件需要使用event.keyCode获取键盘所按下的ASCII码，以下是上下左右方向键的ASCll获取代码：

event.keyCode===38                        //获取小键盘的上方向键的ASCll码

event.keyCode===40                        //获取小键盘的下方向键的ASCll码 

 event.keyCode===37                      //获取小键盘的左方向键的ASCll码 

event.keyCode===39                       //获取小键盘的右方向键的ASCll码 

使用jQuery实现需要下载jQuery并引用，jQuery包已放到本文章, 以下是jQuery的引入HTML方法：

<script type="text/javascript" src="js/jquery.js"></script>

话不多说上代码：

HTML代码：

<img class="boy" src="images/boy.gif" alt="">
	<div class="box">
	X<span class="boxX">0</span>px | Y<span class="boxY">0</span>px
</div>

CSS代码：

.boy{
    position: absolute;
    top:0;left:0;
}
.box{
    width:150px; height: 40px;
    background-color:#000000;
    color:#ffffff;
    text-align: center;
    Line-height: 40px;
    position: absolute;
}

jQuery代码：

$(function(){
    var offest=10;		//初值为10
    $(document).on("keydown",function (event){
        var boyOffest=$(".boy").offset();		//获取boy在页面中的位置
		console.log(boyOffest)
    // 上方向键
    if(event.keyCode===38){
        var boyTop=boyOffest.top;
        $(".boy").css("top",(boyTop-offest) + "px");
    }
    // 下方向键
        if (event.keyCode===40){
            var boyTop=boyOffest.top;
            $(".boy").css("top",(boyTop+offest) + "px");
        }
    //左方向键
        if (event.keyCode===37){
            var boyLeft=boyOffest.left;
            $(".boy").css("left",(boyLeft-offest) + "px");
        }
    // 右方向键
        if (event.keyCode===39){
            var boyLeft=boyOffest.left;
            $(".boy").css("left",(boyLeft+offest) + "px");
        }
    })
    //鼠标控制
    $(document).on("click",function (event){
        var mouseX=event.pageX;
        var mouseY=event.pageY;
        var boyWidth=$(".boy").width();
        var boyHidth=$(".boy").height();
        $(".boy").animate({
            left:mouseX-boyWidth/2 + "px",
            top:mouseY-boyHidth+"px"
        },200);
    })
    //鼠标在文档区的坐标值
    $(document).on("mousemove",function(event){
        var mouseX=event.pageX;
        var mouseY=event.pageY;
        $(".boxX").text(mouseX);
        $(".boxY").text(mouseY);
        $(".box").css({
            left:mouseX + "px",
            top:mouseY + "px"
        })
    })
})

效果图：