0

私はJavascriptを学び始めており、ユーザーがマウスポインターを使用してボックスを左右に押すことができるスクリプトを作成しようとしています。

ポインタがボックスの左側に触れたときになんとか解決できましたが、ここで2つの問題に直面しています。

  1. ポインタがボックス内に入ると、ボックスは新しい座標にジャンプします。ポインタがボックス内に入ったときに、ボックスをその位置に保持したい。
  2. マウスがボックスの右側に触れたとき、私は本当にそれを理解することができません。ボックスを左に押してほしい。私は私を助けるためにbox.offsetRightプロパティを作成しましたが、それを効率的に使用することはできません。

これが私が何を意味するかを示すための写真です： ここに画像の説明を入力してください

「X」マークはポインタがある場所です。そして、箱の右側に向かっています。ボックスを左に押す方法は？

これが私がやろうとしたことです（もちろんうまくいきませんでした）：

index.html

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

            .css-box{
                position: absolute ;
                top:20px;
                width : 100px;
                height : 100px;
                background-color : blue;
            }

            .css-textbox{
                margin-top: 500px;
            }

        </style>
    </head>

    <body>
        <div id="box" class="css-box"></div>
        <div class="css-textbox">            
            <p>All : <input id="allTextbox" type="text"></input></p>
            <p>Left : <input id="leftTextbox" type="text"></input></p>
            <p>Right : <input id="rightTextbox" type="text"></input></p>
            <p>e.pageX(Left) : <input id="pageXTextbox" type="text"></input></p>
            <p>e.pageX(Right) : <input id="pageXRightTextbox" type="text"></input></p>
        </div>
        <script type="text/javascript" src="helper.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>

</html>

script.js

var box = document.getElementById("box");
var allTextbox = document.getElementById("allTextbox");
var leftTextbox = document.getElementById("leftTextbox");
var rightTextbox = document.getElementById("rightTextbox");
var pageXTextbox = document.getElementById("pageXTextbox");
var PageXRightTextbox = document.getElementById("pageXRightTextbox");

Object.prototype.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);

var pushBox = function(e){

    var pageXRight = window.innerWidth - e.pageX;
    box.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);

    if (e.pageX >= box.offsetLeft){
        box.style.left = e.pageX + "px";
    } else if(pageXRight >= box.offsetRight){
        box.style.right = pageXRight  + "px";
    }

    allTextbox.value = window.innerWidth;
    leftTextbox.value = box.offsetLeft;
    rightTextbox.value = box.offsetRight;
    pageXTextbox.value = e.pageX;
    pageXRightTextbox.value = pageXRight;

};

box.addEventListener("mousemove" , pushBox);

JqueryではなくJavascriptを使用して答えを見つけたいと思っています。

ありがとう。

4

1 に答える 1

1

あなたのための可能なアイデア。AS3でコーディングしたカルーセルのように聞こえます。

  1. ボックスのdivコンテナにマウスを合わせると、タイマーでマウスの位置を確認し始めます（かなり高速）。
  2. マウスX、div幅、ボックス幅を使用して、マウスがボックスの左側にあるか右側にあるかを計算できます。おそらく、ボックスの両側に遠隔ヒットエリアが必要です。これにより、マウスが新しい位置にヒットしたときに移動します。（私はあなたのボックスがそのコンテナ内の相対的なcssの位置にあると仮定します。これにより、css：leftとcss：rightをdocument.getElementById（ "xxx"）。styleを介してアニメーション化できます。
  3. ヒットエリアが必要なため、ボックスが左側と右側の制限に達するときは注意してください。

タイマー関数がマウスの位置などをチェックしているときに数値がどのように変化するかを確認できるように、数値出力用のテキストボックスをいくつか作成することをお勧めします。これにより、計算を実行できるようになります。

お役に立てれば。

于 2012-07-22T15:21:41.790 に答える