Question

如果鼠标位于屏幕左侧，我希望图像向左移动，如果鼠标位于屏幕右侧，请使用javascript向右移动，这是我到目前为止的代码：< / p>

    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

我转到您的链接并尝试调试您的代码。我在第21行收到错误，因为您的文档没有“容器”图像（“容器”是div）。

在你问题的开头，你说你想知道相对于“屏幕”中心的鼠标位置。为此，您可能希望使用window.innerWidth而不是您在div上设置的width属性。

Answer 3

为什么不使用html5画布和gee.js

这是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)

    }



}

如何使用JS根据鼠标位置移动图像？

3 个答案: