鼠标滑动方向判断 onmousemove=function（ev）{ }

最新推荐文章于 2025-05-15 19:36:46 发布

原创最新推荐文章于 2025-05-15 19:36:46 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

游戏专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的鼠标跟踪效果，并根据鼠标移动方向动态改变图像显示的方法。通过监听鼠标移动事件，记录鼠标位置并据此更新图像位置，同时根据鼠标横向移动的方向变化来切换不同的图像文件。

var bufferX = [];
this.onmousemove = function (ev) {//移动
    if (true) {
        playerX = ev.clientX;//鼠标的坐标
        playerY = ev.clientY;       
        //控制鱼随鼠标一起动
        player.style.left = playerX + "px";
        player.style.top = playerY + "px";
        bufferX.push(playerX);//将鼠标的X坐标放到数组中
    }
    for(var i=1;i<bufferX.length;i++){
        if(bufferX[i]>bufferX[i-1]){
            player.src = "./img/player_right.png";//图片更改向右
        }else {
            player.src = "./img/player_left.png";//图片更改向左

        }
    }

};