如何使用JS根據鼠標位置移動圖像？

Question

如果鼠標位於屏幕左側，並且如果鼠標位於屏幕右側，使用javascript，則此圖像是我迄今爲止的代碼：

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

所以我敢肯定我絕不錯過任何變量...

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

所以，如果tempX，這應該是X鼠標位置座標，比779大，這是div標籤的中間點，圖片應該是正確的。如果它低於這個數字，它應該離開，否則，速度應該是零，因爲它應該保持不變。

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

我發現了數百種不同的方式來獲取鼠標位置，但這是關閉的W3C，所以我認爲它的工作原理。

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

    </script> 

這就是我的整個腳本。

<div id="container" onmousemove="getMouseXY(event);" width="1546" height="423"> 
     <a href="javascript:var t=setInterval('animBall()', 80)">Start Animation</a> <a href="javascript:clearInterval(t);">Stop Animation</a> <br /> 
     <img src="http://qabila.tv/images/logo_old.png" style="position:absolute;left:10px;top:20px;" id="logo" /> 
    </div> 

我留在了鼠標的位置到最後的依賴關係，動畫腳本能正常工作（或者至少工作，除非我打破了東西好一會纔讀鼠標位置）。

任何想法我做錯了什麼？

如果它的任何幫助，我已經主持了代碼here.

Answer 1

嗯，這需要工作的整個負載，反正我已經做了一些它爲你和你現在可以看到的東西部分的工作，但你將需要在jsfiddle上玩。也許你現在可以打開一些關於使其工作的具體問題。

<div id="container" width="1546" height="423"> <a id="start" href="#">Start Animation</a> <a id="stop" href="#">Stop Animation</a> 
    <br /> 
    <img src="http://qabila.tv/images/logo_old.png" style="position:absolute;left:10px;top:20px;" id="logo" /> 
</div> 

/*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; 
     } 
    } 

    // attribute on unused 
    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

我去了你的鏈接，並嘗試調試你的代碼。由於文檔沒有「容器」圖像（「容器」是div），所以我在第21行中得到一個錯誤。

在你的問題開始時，你說你想知道相對於「屏幕」中心的鼠標位置。爲此，您可能需要使用window.innerWidth而不是您在div上設置的width屬性。

Answer 3

你爲什麼不USEE HTML5的Canvas和gee.js

這裏的爵士小提琴的結果（這可能需要一段時間來加載，但這是的jsfiddle故障，該腳本將加載速度更快，一旦在您的網站） ：http://jsfiddle.net/wLCeE/7/embedded/result/

，這裏是更簡單的代碼，使其工作：

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

var img = new Image(); // Create new img element 
img.onload = function() { 
    demo(g) 
}; 
img.src = 'http://qabila.tv/images/logo_old.png'; // Set source path 

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) 

    } 



}