jQuery炫酷特效之遮罩移動效果

今天帶領你們實現一個很是炫酷的遮罩效果。遮罩跟隨鼠標的移入點移入區塊中（鼠標從區塊左側移入則遮罩也從左側移入，鼠標從左側移出遮罩也會左側移出，其它方向同理），能夠將這樣一個效果應用到本身到網頁中：

炫酷遮罩層

1、準備工做

先想想這樣到一個效果該如何實現呢？HTML結構該怎麼搭建？

......

來看看基本到HTML結構是如何到：

HTML結構

CSS：

CSS

我將a中的overflow:hidden註釋來，來看看初始到遮罩層中什麼位置吧。看完記得將註釋去掉哦。

遮罩初始位置

其實結構也是很簡單的。這裏有個難點就是如何判斷鼠標的移入移出方向？

2、獲取鼠標移入方向

jQuery並未給出這樣的方法，須要本身實現。先放代碼，再解釋：

Math.atan2(y,x) 返回-PI 到 PI 之間的值(負180°到正180°)，是從 X 軸正向逆時針旋轉到點 (x,y) 時通過的角度 這裏的結果是一個弧度值。那如何把這個值轉換爲角度呢？咱們能夠先算出一個角度的弧度值(180 / Math.PI) ，而後用上面計算出來的結果乘以一度的弧度值。（實在不明白自行度娘吧）

3、鼠標移入移出效果

有了上面到基礎，那再去實現效果就簡單多了。

還有一點須要注意：若是鼠標是從下面移入，先將遮罩放在區塊到下面；從右側移入，先把遮罩放在區塊到右側；從上面移入，先把遮罩放在區塊到上面；從左側移入，先把遮罩放再區塊到左側。而後再運動到left:0;top:0;（css使用到了定位）。移出正好跟移入相反。

鼠標移入

鼠標移出

4、jQuery知識點補充

經過這個例子，引伸出一個疑問，鼠標移入移出爲何不使用mouseover和mouseout呢？來看看jQuery中mouseover、mouseout和mouseenter、mouseleave到區別：

• mouseover與mouseenter

不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。

只有在鼠標指針穿過被選元素時，纔會觸發 mouseenter 事件。

• mouseout與mouseleave

不論鼠標指針離開被選元素仍是任何子元素，都會觸發 mouseout 事件。

只有在鼠標指針離開被選元素時，纔會觸發 mouseleave 事件。