DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> JavaScript如何獲取鼠標移入div的方向
JavaScript如何獲取鼠標移入div的方向
編輯:前端技巧     

前幾天看了百度圖片帶有的文字標題,它會隨著鼠標的移動方向載入,覺得蠻有意思,於是就想實現這麼個功能。經過一番搜索和查找,找了兩種實現方法。

方法一:用四個div拼成一個區域,從哪個div移入,就是從哪個方向移入。詳情參考

方法二:獲取鼠標移入的那個點,距離div的左右上下哪條邊最近,最近的那條邊就是鼠標移入的方向。

針對方法二,自己寫了個小方法,代碼如下,僅供參考

 
            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";
                        }
                }

對於上面的代碼,我們可以使用“HTML在線編輯器”進行測試一下。

更多JavaScript精品內容,請關注 學習網的“JavaScript入門教程”

本文來源:(http://www.w3cfuns.com/blog-5460967-5406975.html)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved