0

私は Javascript の初心者で、マウス ポインターを使用してボックスを押す簡単なスクリプトを作成しようとしています。残念ながら、何らかの理由で機能していません。皆さんが私を助けてくれることを願っています。

(このスクリプトは非常に原始的なもので、現在までボックスを左から押すだけです)。

index.html :

<html>
<head>
    <title>Chase the box</title>
    <style>
        body {
        }

        .css-box{
            width : 100px;
            height : 100px;
            margin : auto;
            background-color : blue;
        }

    </style>
</head>

<body>
    <div id="box" class="css-box"></div>
    <script type="text/javascript" src="script.js"></script>
</body>

script.js : 

var box = document.getElementById("box");

var pushBox = function(e){
    if(e.pageX == box.offsetLeft){
        box.style.left = box.style.left + 1 + "px";
    }
};

document.addEventListener("mousemove" , pushBox);
4

4 に答える 4

2

JQueryバージョンですが、あなたがやろうとしているのと同じことを達成します

http://jsfiddle.net/3mxC3/1/

あなたのスクリプトで見られる主な問題は、e.pageX == box.offsetLeft は、pageX が正確に offsetLeft である場合にのみトリガーされることを意味することです。

mousemove イベントはすべてのピクセルを起動するわけではないため、このアプローチは機能しません。これを実現する最も簡単な方法は、代わりに実際のボックスに mousemove を設定することです (したがって、ユーザーのマウスがボックスの上にある場合にのみ起動します)。

次に、ボックスに left 属性を設定しても、左/右がマージンによって設定されていたため、何もしませんでした: auto。これを position: absolute に変更すると、実際には left 属性に注意が向けられます。

于 2012-07-21T18:20:10.930 に答える
1

CSS プロパティが機能するように、要素position以外の CSS プロパティを設定する必要があります。staticleft

.css-box{
     position: absolute;
     width : 100px;
     height : 100px;
     margin : auto;
     background-color : blue;
}
于 2012-07-21T18:20:41.920 に答える
1

box.style.leftは文字列です。JavaScriptstring + intで int を実行すると、文字列に型キャストされてstring + string. たとえば、次box.style.leftの場合10px:

'10px' + 1 + 'px'
  int typecasted to string
'10px' + '1' + 'px'
  create one string
'10px1px'

そして、それが の値になりますbox.style.left。それはあなたが望むものではありません...

これを解決するparseInt()には、文字列を int に解析するを使用できます。

box.style.left = parseInt(box.style.left) + 1 + "px";

そして、あなたの if は、カーソルの X 位置が とまったく同じピクセルである場合にのみ一致しますbox.offsetLeft。それはほとんど不可能です。あなたがそれで何をしようとしているのかわかりません。

少なくとも、box.style.left最初は価値がありません。最初に値を設定してから0イベントを使用する必要があります。

実際の例は次のとおりです: http://jsfiddle.net/WouterJ/enLwh/ (現在の位置でプロパティをposition: relative;使用できないため、追加したことに注意してください)left

あなたはJSを初めて使うので、さらにいくつかのヒントがあります。

  • 次のようなことをすると:

    X = X + 12;

    次のように短縮できます。

    X += 12;

于 2012-07-21T18:26:18.853 に答える
1

最後に、スクリプトを本文に入れるよりも、onload を追加する方がよいでしょう。

これはページの先頭にあるスクリプトです。残りの問題は、ここの他の人々によってすでに解決されています

var pushBox = function(e){
    if(e.pageX >= box.offsetLeft){
        box.style.left = (parseInt(box.style.left,10) + 1) + "px";
    }
},box;
window.onload=function() {
  box = document.getElementById("box");
  document.addEventListener("mousemove" , pushBox);
}
于 2012-07-21T18:43:31.883 に答える