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

したがって、マウス位置の x 座標である tempX が div タグの中間点である 779 よりも大きい場合、画像は正しく表示されます。それよりも小さい場合は左に移動する必要があり、そうでない場合は速度をゼロにして静止する必要があります。

        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 のせいです。スクリプトは Web サイトに一度読み込まれると、はるかに高速に読み込まれます): 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

私はあなたのリンクに行き、あなたのコードをデバッグしようとしました。ドキュメントに「コンテナー」イメージがないため (「コンテナー」は div です)、21 行目でエラーが発生します。

質問の冒頭で、「画面」の中心に対するマウスの位置を知りたいと言っていました。そのためには、div に設定した width 属性の代わりに window.innerWidth を使用することをお勧めします。

于 2013-04-24T17:03:32.540 に答える