1

我正在使用 Oridomi (oridomi.com) Javascript 插件来实现折纸动画。具体来说，我想在页面加载时展开一个 div（图片打开一本书）。

然而，我很难让展开（）方法工作，尽管它是一种可以用插件调用的方法。

你可以从这个例子中看到，我只能让 div 向后折叠，而不是从折叠状态展开（实际上，我希望动画被反转）。

我的javascript函数-

(function(){ function init(){

var $domi = $('.unfold').oriDomi({ vPanels: 2, hPanels: 1, speed: 500, shading: false });

setTimeout(function(){
$domi.oriDomi('reveal', -90);
}, 600);}

document.addEventListener('DOMContentLoaded', init, false);

})();

和 CSS -

.unfold {
    font-family: "Abril Fatface", "Hoefler Text", Constantia, Palatino, Georgia, serif;
    font-size: 4.5rem;
    width: 25rem;
    height: 10rem;
    text-align: center;
    line-height: 1;
    color: #ff676d;
    background-color: #6ac1ff;
    padding: 2.5rem 0;
}

http://oridomi.com上的文档对如何实现这一点不是很清楚。任何帮助将不胜感激。谢谢

4

1 回答 1

0

如果 Oridomi 不支持反向，您有 2 个选项。一种是知道 END 凝视和domi.oriDomi('reveal', 0);. 另一种是先以 0 的速度将其反转，然后以 0 度显示展开。这是一个小提琴：

http://jsfiddle.net/Av6cD/2/

(function fold() {

    var $domi = $('.unfold').oriDomi({
        vPanels: 2,
        hPanels: 1,
        speed: 500,
        shading: false
    });

    $domi.oriDomi('reveal', -90);

    setTimeout(function () {
        $domi.oriDomi('reveal', 0);
    }, 1000);

})();

请注意，即使这是一个很好的效果，oriDomi 也会让你的 DOM 变得一团糟。一旦获得适当的支持，CSS 着色器将是可行的方法。

于 2013-05-03T10:12:03.993 回答