-2

重複の可能性:
なぜこれが機能しないのですか? マウス ポインタを使用してボックスを押す

これは、マウス ポインターを使用してボックスを押すスクリプトで、ボックスが左から押された場合にのみ機能します。

マウス ポインターの位置を取得し、左に移動するか書き込むかを判断する配列を作成しました。

ここに私がこれまでに得たものの実際の例があります。

index.js

<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="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 = null;
  
var arr = [];
var pushBox = function(e){
    var pageXRight = window.innerWidth - e.pageX;
    box.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);
    
    if(arr.length < 2){
        arr.push(e.pageX);
    } else {            
        if(arr[0] < arr[1]){
            if(e.pageX >= box.offsetLeft){
                box.style.left = e.pageX + "px";
            }
        } else if(arr[0] > arr[1]){
            if(pageXRight >= box.offsetRight){
                box.style.right = pageXRight + "px";
            }
        }
        
        arr.shift(arr[0] , arr[1]);        
    }
    
    allTextbox.value = window.innerWidth;
    leftTextbox.value = box.offsetLeft;
    rightTextbox.value = box.offsetRight;
    pageXTextbox.value = e.pageX;
    pageXRightTextbox.value = pageXRight;
}


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

1 に答える 1

1

問題は次の 2 か所にあります。

  1. 両方の css 属性を同時に左右に設定しないでください。これにより、場所を指示する必要があるブラウザーが混乱する可能性があります。1 つを設定する場合は、もう 1 つを null に設定します。

  2. 以下の私のコメントを参照してください

arr[0] と arr[1] は、それらが何であるかを伝えていないため読みにくいため、スクリプトも少し修正しました。そのため、読みやすくするために配列値に変数を割り当てます。

幸せ押し。

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

    if(arr.length < 2){
    arr.push(e.pageX);
    console.log(JSON.stringify(arr));
    } else {

    var previousX = arr[0];
    var newX = arr[1];

    if(previousX < newX){
                // add e.pageX <= box.offsetRight to ensure that mouse appearance to the right of the box would not push the box
        if(e.pageX >= box.offsetLeft && e.pageX <= box.offsetRight){
        box.style.right = null;
        box.style.left = e.pageX + "px";
        }
    } else if(previousX > newX){
        if(pageXRight >= box.offsetRight){
        box.style.left = null;
        box.style.right = pageXRight + "px";
        }
    }

    arr.shift(arr[0] , arr[1]);        
    }

    allTextbox.value = window.innerWidth;
    leftTextbox.value = box.offsetLeft;
    rightTextbox.value = box.offsetRight;
    pageXTextbox.value = e.pageX;
    pageXRightTextbox.value = pageXRight;
}
于 2012-07-22T20:00:01.280 に答える