Funcionalidad de movimiento del mouse sobre el logotipo de Javascript

Actually I am beginner in JavaScript, I need one requirement for JavaScript Functionality. Whenever I mouse over my logo that logo should be moved over the body. This means when I place my mouse cursor over the logo, it should leave that place and move to some other place.

I am trying but the code is not working for me. Can any one suggest me in this regard. For reference I am pasting the link below for gif image.

<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>

For reference click enlace.

preguntado el 12 de febrero de 14 a las 08:02

Take a look on this one stackoverflow.com/questions/7031701/… -

Here's a post i found. Try this. stackoverflow.com/questions/11929687/… -

1 Respuestas

prueba esto:

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

you can use one of two ways:

  1. stop() on $(this).animate to stop the current animation and do an other (i don't like this way)
  2. logoMoved variables to prevent mouseover before anuimation ended.

in your example you use both... it's seems useless.

ejemplo: http://jsfiddle.net/8g3wy/1/ Espero que pueda ayudar.

Respondido 12 Feb 14, 09:02

Thank You Frogmouth. This is what i have expected. - madhusudan yadav

yeee... I'm glad to have help. - Boca de rana

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.