接上一篇博文，介紹完jQuery插件開發后這里上一個自己的作品，也是初次實踐，小有成就的感覺。
話說這個插件年前就寫好了，然后掛到GitHub，然后就偷偷看着Google Analysis心中暗自激動加竊喜，因為看到間歇地有一些來自世界各地的訪客，那感覺真是鄉下二狗子剛進城啊，現在看來好二。
Inspired By
首先要介紹的是靈感來自於，嗯，介紹一下還是有必要的，因為創意這東西，有時候比實際的產品更有意義，也讓我們反思為毛外國友人們更具創造性，我們的思維太僵化勒！
最初是受到國外某大大寫的一個簡單DEMO的啟發，但我忘了當時是搜什么來着，反正就看到了這個頁面，一看我去，This is fucking awesome！然后他剛好有教程講解如何實現的，但一看，講得太簡單，之后憑一時興致研究了下也感覺沒怎么弄清，也就不了了這了。畢竟當時還沒有編寫插件的能力啊。
后來又是一個偶然情況下，還是記不得在網上搜什么來着，又在CODEPEN上看到了這個DEMO，，我去，This's really fucking pretty cool!!，太愛了，愛得不行了就想占有啊。一搜也沒有相關jQuery插件來實現，這是個機會啊，填補國內外空白。我沒有多想，動手開干！
后來陸續發現一些網站已經在使用這樣的效果了，比如大百度的圖片搜索結果里面：
因為自己親自實現過，所以感覺看到后感覺很親切，不會像第一次見到時那么驚嘆了。
插件一定要簡單
其實第一個DEMO里面原作者提供的代碼已經可以讓我們實現這樣的方向感知遮罩效果發，只是沒有文檔，同時使用起來也不方便，需要特定的HTML結構，再引入一些特定的樣式表，最后再調用插件代碼，反正就是作者只是寫了個Demo目的在於展示效果，並沒有給出一個像樣的插件吧。
所以我一開始寫插件就定了個准則：一定要簡單易用！
我指的簡單是用戶只需引入插件代碼，然后調用插件方法，完事。
而平時見到的多數jQuery插件，需要你引入插件樣式表，有的還需要插件提供的圖片什么的，個人覺得最麻煩讓人不想去碰的插件莫過於連HTML格式都要求你必需要怎樣寫，還要在某些元素身上指定樣式類或者data屬性插件才能生效，當然像特定的界面UI部件要除外，那是沒辦法，你HTML不按指定的格式寫就不好生成這些部件，比如Slider啦，Accordion等。
而對於這樣一個圖片效果的插件，至少HTML不需要要求吧，插件代碼直接到頁面去找圖片，找到了就把效果應用上去，跟具體HTML布局依賴不那么緊密，而且可以不單獨引入樣式表吧，能在代碼里完成的工作就盡量不要增加插件使用者的負擔了。
不過我在實現SlipHover的時候，正是因為堅持不寫一個單獨的樣式表文件遇到了些問題：
- 一是圖片遮罩位置的定位問題，由於實際頁面環境很復雜，並且窗口尺寸變化后圖片的位置也可能變化，最后解決方法將遮罩用容器包裹定位同時監聽window的resize事件，在圖片變化后重新定位；
- 二是在實現那個3D遮罩效果的時候，通過JavaScript創建的CSS3動畫無法實現3D，沒辦法，最后的解決辦法是在代碼里面向頁面添加<style>標簽，把3D這部分的CSS3動畫樣式添加到頁面，從而避免了寫到一個單獨的CSS文件里面跟隨插件一起才能使用。
在插件簡單性方面我見過比較有借鑒意義的是以前做項目用過的一個叫photobooth.js的插件，用於在js中調用攝像頭給用戶拍照，這個插件整個就一個js文件，樣式表通過js創建添加到頁面，甚至圖片都轉成dataURL存成文本形式含在了這個js文件里面。
而在極簡方面做得最究極的莫過於這樣的插件：你只需在頁面引入插件代碼，然后甚至都不用調用什么，插件就生效了！比如用於顯示頁面加載進度效果的Pace.js。這跟插件需要實現的具體功能也有關系，像這樣一個監聽頁面加載進度然后在頁面展示出來的效果，確實也不需要你額外再寫代碼去調用什么的，全自動。
3D效果遮罩
最開始是沒有往插件里加入這個3D遮罩效果的，因為嫌CODEPEN那個例子的代碼是SCSS源碼且稍復雜，同時看着也累就沒去研究了。后來深入接觸了CSS3動畫還有各種變形啊什么的之后，受到了啟發，也許可以不借鑒別人的，自己用CSS3來做。
一開始我不太自信能成，所以開始寫了這么一個單獨的DEMO(點擊可全屏查看)確定一切可行之后，再加到了SlipHover里面，做成了一個選項，默認是2D平移的圖片遮罩，當傳遞filp:true到插件時，就啟用這個3D翻動遮罩了。Look，fucking perfect!
在線演示及源碼
項目GitHub地址：https://github.com/Wayou/SlipHover
在線演示：http://wayou.github.io/SlipHover/
SlipHover參數及選項，以及使用方法可以去文檔頁面查看：http://wayou.github.io/SlipHover/
喜歡的友人們一定要去星我(star me)或者叉我(fork me)支持一把啊~
瀏覽器兼容性
能很好地工作在較新的瀏覽器中，IE需9+，同時3D翻動效果在IE里效果呈現得不是很好。
插件收錄情況
下面是SlipHover在各社區網站收錄情況的不完全統計，純屬無聊加蛋疼才整理的。
- Unheap : http://www.unheap.com/media/images/sliphover
- jquery-plugins: http://jquery-plugins.net/sliphover-direction-aware-hover-animation-to-images
- jquery plugin center,需自己提交 ：http://plugins.jquery.com/sliphover/
- jquer : http://jquer.in/jquery-plugins-for-awesome-image-galleries/sliphover/
- the design blitz : http://thedesignblitz.com/best-jquery-plugins-of-the-week-5th-january-18th-january/
- bashooka : http://bashooka.com/coding/cool-jquery-image-hover-plugins/
Reference:
- Direction aware hover effect on iamges: http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/index2.html
- Direction aware hover 3D effect demo from CODEPEN: http://codepen.io/taufnrsyd/7pen/ufcdG
- Algorithm on how to determine the direction of the mouse when hover on an element from stackoverflow: http://stackoverflow.com/questions/3627042/jquery-animation-for-a-hover-with-mouse-direction