插件描述：ORIDOMI实现的jquery折纸效果效果非常棒
ORIDOMI实现的jquery折纸效果效果非常棒
使用步骤
通过将您的目标元素传递给构造函数创建一个 OriDomi 实例：
1 | var folded = new OriDomi(document.getElementsByClassName('paper')[0]); |
...或是传递一个选择器字符串和 OriDomi 将使用匹配的第一个元素：
1 | var folded = new OriDomi('.paper'); |
如果您更喜欢使用 jQuery，试试这个：
1 2 3 4 5 | var $folded = $('.paper').oriDomi({/* options object */});// when using jQuery, iterate OriDomi methods over multiple elements like this:$folded.oriDomi('accordion', 20);// to access the OriDomi instance at the top of the jQuery selection directly:var folded = $folded.oriDomi(true); |
参数配置
当创建新的 OriDomi 组成，则可以作为第二个参数传递一张地图的选项：
1 2 3 4 5 6 7 8 | var folded = new OriDomi('.paper', { speed: 1200, // folding duration in ms ripple: 2, // backwards ripple effect when animating shadingIntesity: .5, // lessen the shading effect perspective: 800, // smaller values exaggerate 3D distortion maxAngle: 40, // keep the user's folds within a range of -40 to 40 degrees shading: 'soft' // change the shading type}); |
影响
大多数效果方法只需要一个折叠的角度作为其第一个参数。
1 | folded.accordion(30); |
您可以指定锚点以折从 （左、 右、 顶部或底部） 作为第二个参数：
1 2 3 4 | folded.curl(-50, 'top');foldUp()是一种独特效果方法不带角度参数，因为它会导致 OriDomi 组成完全卷起交错的方式。// completely hides the element:folded.foldUp(); |
回调
也许你会想当动画完成的时候做点什么吗？传递一个回调函数：
1 2 3 4 | folded.curl(-50, 'top', function(event, instance) { // arguments are the transition event and the OriDomi instance alert('It seems my folding days are through.');}); |
请记住参数是灵活。时离开了锚论点假定你最后使用锚点。OriDomi 通常可以找出你的意思：
1 2 3 | folded.ramp(14, function() { alert('A callback as a second argument...');}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 以简单的方式创造有趣和疯狂的移动文本。
- 下一个特效： jQuery ReSmenu 菜单