jQuery炫酷图片3d背景视觉差特效
Smart3D是一款效果非常炫酷的jQuery图片背景视觉差特效插件。该插件将图片以层的形式排放,当鼠标滑过图片的时候,每一层的图片的运动速度各不相同,从而形成强烈的视觉差效果。
CSS样式
CSS设置只需要为<ul>和<li>分别设置一个宽度和高度即可。
JAVASCRIPT
在页面加载完毕后,可用下面的方法调用该视觉差插件。
可用参数
以下是该视觉差特效的一些可用参数。
via:http://www.htmleaf.com/jQuery/shijuecha/201504051627.html
查看演示 下载插件
使用方法
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。
via:http://www.htmleaf.com/jQuery/shijuecha/201504051627.html
【jQuery炫酷图片3d背景视觉差特效】相关文章
4. jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效
9. 基于Threejs的jQuery 3d图片旋转木马特效插件
10. Javascript视差特效引擎 - Parallax.js
本文来源:https://www.51html5.com/a1522.html
﹝jQuery炫酷图片3d背景视觉差特效﹞相关内容
- Javascript视差特效引擎: Parallax.js
- 7款炫酷实用 jQuery/HTML5图片应用
- CSS3边框背景-边框背景(-border-image)
- CSS3 transition实现超酷图片墙动画效果
- CSS3 transition实现超酷图片墙动画效果
- 3D视觉盛宴:Cube 基于google地图的HTML5云游戏
- Jquery实现添加3D特效到你的幻灯片
- 分享Jquery+CSS3实现的3D下拉菜单特效
- 用CSS和jQuery打造3D窗帘切换特效
- Jquery实现添加3D特效到你的幻灯片