2

如果鼠标在屏幕左侧，我希望图像向左移动，如果鼠标在屏幕右侧，则图像向右移动，使用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>

我把对鼠标位置的依赖留在了最后，所以动画脚本可以正常工作（或者至少可以工作，除非我破坏了一些东西试图让它读取鼠标位置）。

任何想法我做错了什么？

如果有任何帮助，我已经在这里托管了代码。

4

3 回答 3

0

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

这是 js fiddle 结果（加载可能需要一段时间，但这是 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)

    }



}
于 2013-04-24T17:28:00.297 回答
0

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

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

于 2013-04-24T17:03:32.540 回答
0

好吧，这需要大量的工作，无论如何，我已经为你做了一些工作，你现在可以看到部分工作，但你需要在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);
}());
于 2013-04-24T16:51:54.467 回答