SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

接上一篇博文，介绍完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在各社区网站收录情况的不完全统计，纯属无聊加蛋疼才整理的。

1. Unheap : http://www.unheap.com/media/images/sliphover
2. jquery-plugins: http://jquery-plugins.net/sliphover-direction-aware-hover-animation-to-images
3. jquery plugin center,需自己提交　：http://plugins.jquery.com/sliphover/　
4. jquer : http://jquer.in/jquery-plugins-for-awesome-image-galleries/sliphover/
5. the design blitz : http://thedesignblitz.com/best-jquery-plugins-of-the-week-5th-january-18th-january/
6. bashooka : http://bashooka.com/coding/cool-jquery-image-hover-plugins/

 

Reference:

1. Direction aware hover effect on iamges: http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/index2.html
2. Direction aware hover 3D effect demo from CODEPEN: http://codepen.io/taufnrsyd/7pen/ufcdG
3. 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