ORIDOMI实现非常棒的jquery折纸效果66
使用步骤
通过将您的目标元素传递给构造函数创建一个 OriDomi 实例:

var folded = new OriDomi(document.getElementsByClassName('paper')[0]);

...或是传递一个选择器字符串和 OriDomi 将使用匹配的第一个元素:
var folded = new OriDomi('.paper');
如果您更喜欢使用 jQuery,试试这个:
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 组成,则可以作为第二个参数传递一张地图的选项:
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
});
影响 大多数效果方法只需要一个折叠的角度作为其第一个参数。
folded.accordion(30);
您可以指定锚点以折从 (左、 右、 顶部或底部) 作为第二个参数:
folded.curl(-50, 'top');
foldUp()是一种独特效果方法不带角度参数,因为它会导致 OriDomi 组成完全卷起交错的方式。
folded.foldUp();
回调 也许你会想当动画完成的时候做点什么吗?传递一个回调函数:
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 通常可以找出你的意思:
folded.ramp(14, function() {
  alert('A callback as a second argument...');
});
      立即下载 ( 文件大小:1.58 M)

    浏览器兼容性

    1. Mozilla Firefox
    2. Google Chrome
    3. Oper
    4. Safari

    技术讨论区

    1. 请先登录

        发 布

    键盘快捷键: 上一个 下一个