带方向感知的鼠标滑过图片边框特效jQuery插件

jquery.focus-follow.js是一款带方向感知的鼠标滑过图片边框特效jQuery插件。在鼠标滑过图片的时候，插件会感知鼠标的位置，将相应大小的图片边框从不同位置进入，图片边框会根据图片大小而变化，还可以有圆角效果。

使用方法

使用该插件需要在页面中引入jQuery和jquery.focus-follow.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.focus-follow.js"></script>              
                

HTML结构

图片的布局可以是一个图片画廊或网格图片的方式。

<div class="wrapper">
  <img src="http://placehold.it/300x200" class="img">
  <img src="http://placehold.it/300x100" class="img">
  <img src="http://placehold.it/300x200" class="img">
  ......
</div>        
                

初始化插件

在页面DOM元素加载完毕之后，可以通过followFocus()方法来初始化该插件。

$(".img").followFocus();                 
                

配置参数

jquery.focus-follow.js插件有如下一些可用的配置参数：

jquery-focus-follow.js插件的github地址为：https://github.com/matthiasklan/jquery-focus-follow