jQuery超酷动感模糊图片视觉差特效

这是一款效果非常炫酷的jQuery超酷动感模糊图片视觉差特效。该视觉差特效在鼠标滑过图片的时候图片会产生轻微倾斜和动感模糊效果，就像摄像机的镜头在轻微的晃动，效果非常逼真。

使用方法

使用该视觉差插件需要引入jQuery和jquery.parallax.js以及jquery.mCustomScrollbar.css文件。

<script src="jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.parallax.js"></script>              
              

HTML结构

<div class="container">
    <img src="example.jpg">
</div>               
              

初始化插件

在页面加载完毕之后，可以通过下面的方法来初始化该视觉差插件。

$('.container').parallax(options);             
              

配置参数

下面是这个视觉差插件的可用参数：

• imageSelector：图片的选择器，会在container中进行搜索。默认是img，该参数只会选择第一个匹配的元素。
• shadowCount：克隆图片的数量。默认是4。数字太大会影响性能。
• shadowOpacity：克隆图片的透明度。值在0（隐藏）到1（完全可见）之间。默认值：1 / (shadowCount + 1)。
• clipShadows：是否在图片容器上应用overflow: hidden，是克隆的图片不会溢出容器。默认值：true。
• hideOnMouseLeave：是否当鼠标离开图片容器的时候隐藏克隆的图片。默认值：true。
• hideOriginalImage：是否在创建克隆图片之后隐藏原来的图片。默认值：true。
• maxRotationDegree：图片的最大旋转角度，默认值是10。正数值会使图片接近鼠标，负数值会使图片远离鼠标。
• translateMultiplier：鼠标滑过图片时水平和垂直移动的数量，默认值为-10，这将图片的中心远离鼠标。
• imageScale：图片缩放的比例，默认值为1.1。
• perspective：CSS transform: perspective()的值。值越小效果越强烈。默认值为500。
• baseZetaIndex：在第一个克隆图片上使用的CSS z-index的值。
• transformOrigin：是否改变转换的原点。默认值为false。