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

云罗郡主
リリース: 2018-10-29 16:05:56
転載
2123 人が閲覧しました

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

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

関連ラベル:
ソース:lvyestudy.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート