Javascript徽标移动鼠标悬停功能

Javascript徽标移动鼠标悬停功能,javascript,jquery,html,css,Javascript,Jquery,Html,Css,实际上我是JavaScript的初学者,我需要一个JavaScript功能的要求。 每当我将鼠标移到我的徽标上时,该徽标应移到车身上。这意味着当我将鼠标光标放在徽标上时,它应该离开该位置并移动到其他位置 我正在尝试,但代码对我不起作用。在这方面谁能给我提建议。作为参考,我正在粘贴下面的gif图像链接 <script type="javascript"> $("#logo").mouseover(function(){ if(!logoMove){return;

实际上我是JavaScript的初学者,我需要一个JavaScript功能的要求。 每当我将鼠标移到我的徽标上时,该徽标应移到车身上。这意味着当我将鼠标光标放在徽标上时,它应该离开该位置并移动到其他位置

我正在尝试,但代码对我不起作用。在这方面谁能给我提建议。作为参考,我正在粘贴下面的gif图像链接

<script type="javascript">
    $("#logo").mouseover(function(){
        if(!logoMove){return;}
        var tmp=new Array(
            {left:10,                               top:10},
            {left:10,                               top:$("#bodycontainer").height()-220},
            {left:$("#bodycontainer").width()-220,  top:$("#bodycontainer").height()-220},
            {left:$("#bodycontainer").width()/2,    top:$("#bodycontainer").height()/2},
            {left:$("#bodycontainer").width()-220,  top:20}
        );
        var rand = Math.floor(Math.random() * tmp.length);
        while(tmp[rand].left == $(this).css("left") &&
            tmp[rand].top == $(this).css("top")){
            rand = Math.floor(Math.random() * tmp.length);
        }
        $(this).stop().animate({
                left:tmp[rand].left,
                top:tmp[rand].top
            },
            400
        );
    });
}
<script>

<div id="logo">
    <img width="500" height="462" src="http://www.gameark.com/templates/onarcade/images/logo.png" >
</div>
如需参考,请单击尝试以下操作:

var logoMoved = false;
var _k = 0;
$("#logo").on("mouseenter",function(){
    if(logoMoved) return;
    var tmp = [
        {
            left:10, 
            top:10
        },
        {
            left:10,
            top:$("#bodycontainer").height()-220
        },
        {
            left:$("#bodycontainer").width()-220,
            top:$("#bodycontainer").height()-220
        },
        {
            left:$("#bodycontainer").width()/2,
            top:$("#bodycontainer").height()/2
        },
        {
            left:$("#bodycontainer").width()-220,
            top:20
        }
    ];
    logoMoved = true;
    var _n = Math.floor(Math.random() * tmp.length);;
    while(_k == _n){
         _n = Math.floor(Math.random() * tmp.length);
    }
    _k = _n;
    $(this).animate({
        left:tmp[_k].left,
        top:tmp[_k].top
    },400,function(){
        logoMoved = false;
    });
});
您可以使用以下两种方法之一:

停止$this.animate以停止当前动画并执行其他我不喜欢的方式 logoMoved变量以防止鼠标在动画结束前滑过。 在您的示例中,您同时使用。。。这似乎没用

例如:
我希望它能有所帮助。

看看这篇文章。这是我找到的一篇文章。试试这个。谢谢你,青蛙嘴。这就是我所期望的。yeee。。。我很高兴能得到帮助。