JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery炫酷图片3d背景视觉差特效

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

【jQuery炫酷图片3d背景视觉差特效】相关文章

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

2. jQuery超炫图片3D背景视觉差特效插件

3. jQuery网页背景视觉差滚动效果

4. jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效

5. 9种CSS3炫酷图片预览展示动画特效

6. jQuery炫酷点击变形全屏放大的模态窗口

7. CSS3系列教程:背景图片(背景大小和多背景图)

8. jQuery基于图片的元素背景模糊特效插件

9. 基于Threejs的jQuery 3d图片旋转木马特效插件

10. Javascript视差特效引擎 - Parallax.js

本文来源:https://www.51html5.com/a1522.html

点击展开全部

﹝jQuery炫酷图片3d背景视觉差特效﹞相关内容

「jQuery炫酷图片3d背景视觉差特效」相关专题

其它栏目

也许您还喜欢