让图片直线移动到鼠标点击位置,类似游戏里的人物走动!

最新推荐文章于 2025-08-09 00:00:19 发布

流浪狗

最新推荐文章于 2025-08-09 00:00:19 发布

阅读量624

点赞数

分类专栏： JavaScript 文章标签：游戏 null function

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的鼠标跟随效果。通过计算鼠标位置与图片当前位置的偏移量，可以平滑地移动图片到鼠标所在的位置。该效果适用于网页互动设计，能够提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <body onclick="moveImg(event);">
<div style="position:absolute;left:0px;top:0px;" id="img"><img src="img.gif"></div>
</body>
<script>
    var img=document.getElementById("img");
    var time=5;//时间,单位毫秒
    var speed=2;//(speed/time)速度,单位象素,起点到终点的直线速度
    var moveObj=null;
    function moveImg(event){
        var eventevent=event||window.event;
        if(moveObj!=null){
            window.clearInterval(moveObj);
            moveObj=null;
        }
        var imgX=parseInt(img.style.left);
        var imgY=parseInt(img.style.top);
        var moveX=event.clientX;
        var moveY=event.clientY;
        var x=moveX-imgX;
        var y=moveY-imgY;
        //计算速度基数
        var speedspeedNum=speed/Math.sqrt(x*x+y*y);
        //计算X轴速度
        var speedX=speedNum*x;
        //计算Y轴速度
        var speedY=speedNum*y;        
        //alert(speedX+":"+speedY);
        //移动图片
        moveObj=window.setInterval(function(){moveImage(speedX,speedY,moveX,moveY);},time);
    }
    var mx=0;my=0;
    function moveImage(x,y,endX,endY){
        //由于网页上left属性改变量小于1的时候，按1改变，所以计算出当移动量大于1时才改变left属性
        mxmx=mx+x;
        var m=Math.floor(mx);
        if(m<0){
            m++;
        }
        if(m>=1 || m<=-1){
            img.style.left=(parseInt(img.style.left)+m)+"px";
            mxmx=mx-m;
        }
        //由于网页上top属性改变量小于1的时候，按1改变，所以计算出当移动量大于1时才改变top属性
        mymy=my+y;
        var n=Math.floor(my);
        if(n<0){
            n++;
        }
        if(n>=1 || n<=-1){
            img.style.top=(parseInt(img.style.top)+n)+"px";
            mymy=my-n;
        }
        //当移动到指定位置时停止移动
        var xflag=false;
        var yflag=false;
        if(x>=0){
            if(parseInt(img.style.left)>=endX){
                xflag=true;
            }
        }else{
            if(parseInt(img.style.left)<=endX){
                xflag=true;
            }
        }
        if(y>=0){
            if(parseInt(img.style.top)>=endY){
                yflag=true;
            }
        }else{
            if(parseInt(img.style.top)<=endY){
                yflag=true;
            }
        }
        if(xflag && yflag){
            window.clearInterval(moveObj);
            moveObj=null;
        }
    }
</script>