Comment puis-je créer l'élément mobile à l'aide de la position de la souris, comme à http://fieroanimals.com/?

Je veux créer de l'élément div avec une image à l'intérieur, et de le changer de position avec les coordonnées de la position de la souris. Il y a un peu de jquery-pluings pour créer l'effet 3d, mais j'ai besoin de déplacer seulement sur les coordonnées X et Y. Aussi, le faire que dans la limite de l'élément div.

J'ai reçu de code suivant:

$('div.images').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $('div.images').css({'top': x,'left': y}); 
    });

Dans le CSS de la div.les images ont position absolue. Quand je bouge ma souris ne change pas de position, mais quand je supprime position dans le CSS, c'est d'appliquer les modifications au style de l'élément, mais pas de changer de position.

Donner moi des conseille ce que je dois faire.

À http://fieroanimals.com/ qu'a réalisé sur Flash, mais je veux le faire sur JQuery.

OriginalL'auteur Alexander Shvets | 2012-06-28

  1. 6

    je sais que c'est une vieille question.mais cette réponse serait utilisable pour les nouveaux utilisateurs. réponse fonctionne à 100%. 

    $(document).ready(function(){
      $('div.moveAble-container').mousemove(function(e){
            var y = e.pageY;
            var x = e.pageX;                    
            $('div.moveAble').css({'top': y}); 
            $('div.moveAble').css({'left': x});

      });
    });

    OriginalL'auteur user2408194

  2. 3

    $('div.images').mousemove(...) implique qu'il sera seulement de détecter les mouvements de la souris qui sont au-dessus de div.images.

    $('html') permettra de détecter les mouvements de la souris sur l'ensemble de la page.

    jsFiddle Exemple

    En fonction de vos besoins, vous pouvez appliquer la coordonnée X de votre CSS left propriété et coordonnée à la CSS de top. (Vous l'avez dans l'autre sens dans votre question).

    Oui. Je l'ai eu. C'est de ma faute. Sur plus: Comment j'ai besoin de modifier les coordonnées de l'image, donc je peux me déplacer comme sur fieroanimals.com, pour les images verticales, par exemple.
    x et y sont inversés. Il devrait être comme ça: $('div.images').css({'top': y,'left': x});

    OriginalL'auteur Quantastical