Comment déplacer une image en fonction de l'emplacement de la souris en utilisant JS ?

Question

Je voudrais qu'une image se déplace vers la gauche si la souris est à gauche de l'écran et vers la droite si la souris est à droite de l'écran, en utilisant JavaScript, voici le code que j'ai jusqu'à présent :

    var dirx = 0;  
    var spdx = 35; 
    var imgLeftInt; 
    var imgTopInt; 
    var imgHeight; 
    var imgWidth; 
    var divWidth; 
    var divHeight; 
    var t;
    var tempX;
    var tempY;

Je suis donc assez sûr de ne manquer aucune variable...

    function animBall(on) {               
        imgLeftInt = parseInt(document.images['logo'].style.left); 
        imgTopInt = parseInt(document.images['logo'].style.top); 
        imgHeight =  parseInt(document.images['logo'].height); 
        imgWidth =  parseInt(document.images['logo'].width); 
        divWidth = parseInt(document.images['container'].width);        
        if (tempX > 779){
            dirx = 1;
        } 
        else if(tempX < 767){
            dirx = 2;
        }
        else {
            spdx = 0;
        }

Donc si tempX, qui devrait être la coordonnée x de la position de la souris, est supérieur à 779, qui est le point milieu de la balise div, l'image devrait aller à droite. S'il est inférieur à cela, il devrait aller à gauche, et sinon, la vitesse devrait être nulle, c'est-à-dire qu'il devrait rester immobile.

        if(dirx == 1){                            
            goRight(); 
        } else if(dirx == 2) {                                      
            goLeft(); 
        }        
    }
    function getMouseXY(e) {
        tempX = e.clientX;
        tempY = e.clientY;
        }

J'ai trouvé des centaines de façons différentes d'obtenir la position de la souris, mais cela venait du W3C donc je suppose que cela fonctionne.

    function goRight() { 
        document.images['logo'].style.left = imgLeftInt+spdx +"px"; 
        if (imgLeftInt >  (divWidth-imgWidth)){ 
            dirx = 2; 
            spdx= 20; 
        } 
    } 

    function goLeft() { 
        document.images['logo'].style.left = (imgLeftInt-spdx) +"px"; 
        if (imgLeftInt <  5){ 
            dirx = 1; 
            spdx= 20; 
        } 
    } 

Voilà tout mon script.

        Commencer l'animation Arrêter l'animation  

J'ai laissé la dépendance à l'emplacement de la souris à la toute fin pour que le script d'animation fonctionne bien (ou du moins fonctionnait, sauf si j'ai cassé quelque chose en essayant de lui faire lire l'emplacement de la souris).

Des idées sur ce que je fais mal ?

Si cela peut aider, j'ai hébergé le code ici.

Answer 1

Eh bien, cela a nécessité beaucoup de travail, mais j'ai déjà fait une partie pour vous et vous pouvez maintenant voir les choses partiellement fonctionner, mais vous devrez jouer avec sur jsfiddle. Peut-être pouvez-vous maintenant poser des questions spécifiques concernant la mise en fonctionnement de ceci.

 Démarrer l'animation  Arrêter l'animation 

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global */

(function () {
    "use strict";

    var start = document.getElementById("start"),
        stop = document.getElementById("stop"),
        container = document.getElementById("container"),
        logo = document.getElementById("logo"),
        dirx = 0,
        spdx = 35,
        imgLeftInt,
        imgTopInt,
        imgHeight,
        imgWidth,
        divWidth,
        divHeight,
        t,
        tempX,
        tempY;

    function getMouseXY(e) {
        tempX = e.clientX;
        tempY = e.clientY;
    }

    function goRight() {
        logo.style.left = imgLeftInt + spdx + "px";
        if (imgLeftInt > (divWidth - imgWidth)) {
            dirx = 2;
            spdx = 20;
        }
    }

    function goLeft() {
        logo.style.left = (imgLeftInt - spdx) + "px";
        if (imgLeftInt < 5) {
            dirx = 1;
            spdx = 20;
        }
    }

    // attribut non utilisé
    function animBall(on) {
        imgLeftInt = parseInt(logo.style.left, 10);
        imgTopInt = parseInt(logo.style.top, 10);
        imgHeight = parseInt(logo.height, 10);
        imgWidth = parseInt(logo.width, 10);
        divWidth = parseInt(container.width, 10);

        if (tempX > 779) {
            dirx = 1;
        } else if (tempX < 767) {
            dirx = 2;
        } else {
            spdx = 0;
        }

        if (dirx === 1) {
            goRight();
        } else if (dirx === 2) {
            goLeft();
        }
    }

    function startAnim() {
        t = setInterval(animBall, 80);
    }

    start.addEventListener("click", startAnim, false);

    function stopAnim() {
        clearInterval(t);
    }

    stop.addEventListener("click", stopAnim, false);

    container.addEventListener("mousemove", getMouseXY, false);
}());

Answer 2

Je suis allé sur votre lien et j'ai essayé de déboguer votre code. J'obtiens une erreur à la ligne 21 car votre document ne comporte pas d'image "conteneur" ("conteneur" est une div).

Au début de votre question, vous avez dit que vous vouliez connaître la position de la souris par rapport au centre de l'écran. Pour cela, vous voudriez probablement utiliser window.innerWidth à la place de l'attribut de largeur que vous avez défini sur votre div.

Answer 3

Pourquoi n'utilisez-vous pas le canvas html5 et gee.js

Voici le résultat de js fiddle (cela peut prendre un certain temps à charger, mais c'est la faute de jsfiddle, le script se chargera beaucoup plus rapidement une fois sur votre site web) : http://jsfiddle.net/wLCeE/7/embedded/result/

et voici le code beaucoup plus simple pour le faire fonctionner :

var g = new GEE({
    width: 500,
    height: 423,
    container: document.getElementById('canvas')
});

var img = new Image(); // Créer un nouvel élément img
img.onload = function () {
    demo(g)
};
img.src = 'http://qabila.tv/images/logo_old.png'; // Définir le chemin source

function demo(g) {

    var style = "left"

    g.draw = function () {

        if (g.mouseX > g.width / 2 && style == "left") styleRight()
        else if (g.mouseX < g.width / 2 && style == "right") styleLeft()

    }

    function styleLeft() {
        style = "left"
        g.ctx.clearRect(0, 0, g.width, g.height)
        g.ctx.drawImage(img, 0, 0)

    }

    function styleRight() {
        style = "right"
        g.ctx.clearRect(0, 0, g.width, g.height)
        g.ctx.drawImage(img, g.width - img.width, 0)

    }

}