JavaScriptを使用してマウスの移動方向をdivに取得する方法

この記事の内容は、JavaScript を使用してマウスを移動する方向を取得する方法に関するものです。必要な方は参考にしていただければ幸いです。

数日前、Baidu の画像にテキストキャプションがマウスの移動方向に応じて読み込まれるのを見て、非常に興味深い機能だと思ったので、そのような機能を実装したいと思いました。いろいろ探してみたところ、実装方法が2つ見つかりました。

方法 1: 4 つの div を使用してエリアを形成します。どの div から移動するかが方向になります。

方法 2: マウスが移動するポイントを取得します。div の左、右、上、下のどの辺に近いかが、マウスが移動する方向になります。

メソッド 2 については、参考のために次のような小さなメソッドを作成しました。

function getDirection(ev) {
            var mx = ev.clientX,
                    my = ev.clientY;
            var el = this.offsetLeft,
                    et = this.offsetTop,
                    ew = this.clientWidth,
                    eh = this.clientHeight;
            var left = mx - el,
                    right = el + ew - mx,
                    top = my - et,
                    bottom = et + eh - my;
            var min = Math.min.apply(Math, [left, right, top, bottom]);
            if (min === left) {
                    return "left";
            } else if (min === right) {
                    return "right";
            } else if (min === top) {
                    return "top"
            } else {
                    return "bottom";
            }
    }

上記は、JavaScript がマウスの移動方向を取得する方法の完全な紹介です。詳細については、 JavaScript チュートリアル の詳細については、PHP 中国語 Web サイトを参照してください。

以上がJavaScriptを使用してマウスの移動方向をdivに取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。