Smart3D是一款效果非常炫酷的jQuery图片背景视觉差特效插件。该插件将图片以层的形式排放，当鼠标滑过图片的时候，每一层的图片的运动速度各不相同，从而形成强烈的视觉差效果。

使用方法

HTML结构

该图片背景视觉差特效使用无序列表来组织各个图层，每一个<li>元素是一个图片层。

<ul id="smartdemo1">
    <li><img src="images/1.png" /></li>
    <li><img src="images/2.png" /></li>
    <li><img src="images/3.png" /></li>
    <li><img src="images/4.png" /></li>
    <li><img src="images/5.png" /></li>
</ul>
CSS样式

CSS设置只需要为<ul>和<li>分别设置一个宽度和高度即可。

#mindscape {
    width: 720px;
    height: 170px;
    overflow: hidden;
    border:2px solid #444444;
}
#mindscape li{
    width: 844px;
    height: 170px;
}
JAVASCRIPT

在页面加载完毕后，可用下面的方法调用该视觉差插件。

$(function() {
    $('#mindscape').smart3d();
});

可用参数

以下是该视觉差特效的一些可用参数。

  • frameWidth：类型：integer。可选项，设置宽度（可以在CSS中设置）。
  • frameHeight：类型：integer。可选项，设置高度（可以在CSS中设置）。
  • horizontal：类型：boolean。可选项，是否是水平视觉差效果。默认值：true。
  • vertical：类型：boolean。可选项，是否是垂直视觉差效果。默认值：true。
  • firstStatic：类型：boolean。可选项，第一个图片是否静止。默认值：true。
  • lastStatic：类型：boolean。可选项，最后一个图片是否静止。默认值：true。
  • invertHorizontal：类型：boolean。可选项，水平反转。默认值：false。
  • invertVertical：类型：boolean。可选项，垂直反转。默认值：false。