当前位置: IT培训 > HTML5培训 > 前端开发 > ORIDOMI动态折纸插件
ORIDOMI动态折纸插件 时间:2017-07-12     来源:移动互联网学院

身为一位资深的前端小帅哥,如果连炫酷的前端动态效果插件都不是很了解的话是不是有点过份呢? 那么我们今天就一起来进行神秘的探索之路吧!

当然了任意一个插件的开始都是有一个js需要引入的哟!这个折纸插件也不例外我们可以直接引入<script type="text/javascript" src="js/oridomi.min.js" ></script> 

也就是折纸的相关js文件就好啦 !

下面我们来看一下关于这个插件的使用步骤是怎样的吧!

我们首先要将自己所创建的目标元素传递给构造函数创建一个OrDomi 实例:

也就是 这样

Var oImg=folded=new OriDomi(document.getElementsByClassName(“img”)[0]);

或者是直接传递一个选择器字符串和 OriDomi 将使用匹配的第一个元素:

Var folded=new OriDomi(“.img”);

当然啦 如果你是一个jquery 的小粉丝的话,也可以试一下这个小东西的

Var $img=$(‘.img’).oriDomi({/*再此传入你的对象值 */})

$folded.oriDomi(‘accordion’,20)  //时间值

Var folded=$folded.oriDomi(true);

好啦接下啦我们看一下关于oriDomi的配置参数都有哪些呢?

1. var folded=new OriDomi(‘.img’,{

2. Speed: 1000, //折叠速度或者时间

3. Ripple: 2  ,//当动画的时候,向后的涟漪效应

4. shadingIntesity : 5 ,// 减少阴影的效果

5. Perspective:500 ,//小幅度的增强3D效果

6. MaxAngle: 30, //将用户的折叠范围保持在30-30度范围内

7. Shading:’soft’ //改变材质类型

8. 

9. })

关于参数的影响。

其实呢大多数效果方法只需要一个折叠的角度作为其第一个参数就好了

例如: 

Folded.accordion(30);

当然了作为一个插件给予用户更多的选择才是王道,你也可以指定锚点也就是折叠方向是(左 、 下 、 右 、 上)作为第二个参数:

例如:

Folded.curl(-40,’top’)

同样 foldUp()是一种独特效果方法不带角度的参数,因为它会导致OriDomi 组成完全卷起交错的方式。

好啦一个全新的插件现在就已经立体的展现在我们眼前了,你还在犹豫什么?赶快来体验吧!

X