DIV CSS 佈局教程網

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

方法一：用四個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）