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