JavaScript はどのようにして div 内に移動するマウスの方向を取得しますか (コード例)

JavaScript はどのようにしてマウスが div 内に移動する方向を取得するのでしょうか? JavaScript に触れたばかりの友人の中には、このような疑問を持つ人も多いと思います。この章では、JavaScript を使用して div 内に移動するマウスの方向を取得する方法を紹介します。困っている友人は参考にしていただければ幸いです。

数日前、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 サイトの他の関連記事を参照してください。