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

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

停止（）on $（this）.animate停止当前动画并做另一个（我不喜欢这样）
logoMoved变量以防止在动画结束前进行鼠标悬停。

在你的例子中，你同时使用它们......它似乎毫无用处。

示例：http://jsfiddle.net/8g3wy/1/ 我希望它可以提供帮助。

Javascript徽标移动鼠标悬停功能

1 个答案: