jQuery炫酷图片3d背景视觉差特效

当前位置:主页 > jQuery库 > 视觉差滚动效果 > jQuery炫酷图片3d背景视觉差特效
jQuery炫酷图片3d背景视觉差特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:04-05
    阅读:
简要教程

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。