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

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

查看演示  下载插件

使用方法


HTML结构


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

1. <ul id="smartdemo1">
   
2.     <li><img src="images/1.png" /></li>
   
3.     <li><img src="images/2.png" /></li>
   
4.     <li><img src="images/3.png" /></li>
   
5.     <li><img src="images/4.png" /></li>
   
6.     <li><img src="images/5.png" /></li>
   
7. </ul>     

复制代码

CSS样式


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

1. #mindscape {
   
2.     width: 720px;
   
3.     height: 170px;
   
4.     overflow: hidden;
   
5.     border:2px solid #444444;
   
6. }
   
7. #mindscape li{
   
8.     width: 844px;
   
9.     height: 170px;
   
10. }

复制代码

JAVASCRIPT


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

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

复制代码

可用参数


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

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

via:http://www.htmleaf.com/jQuery/shijuecha/201504051627.html

图片附件: 201504051520.jpg (昨天 14:56, 110.4 KB) / 下载次数 0
http://bbs.html5cn.org/forum.php?mod=attachment&aid=MjgwMjV8NWNmOTI5ZDV8MTQyOTg3NTQ4MHwwfDA%3D