Javascript 徽标移动鼠标悬停功能

Question

其实我是 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>

参考点击link.

Answer 1

试试这个：

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;
    });
});

您可以使用以下两种方式之一：

1. $(this).animate 上的 stop() 停止当前动画并执行其他动画（我不喜欢这种方式）
2. logoMoved 变量可防止动画结束前鼠标悬停。

在您的示例中，您同时使用了这两者……这似乎没用。

示例：http://jsfiddle.net/8g3wy/1/ 希望能帮到你。