jQuery Flip - 一个轻量级的jQuery插件，用于创建3d翻转动画。
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jquery.flip.js 制作3D 动画翻转内容效果，内容可以包含文字段落，也可以包含图片。

如何使用：

引入html

<div id="card">
    <div class="front">
        Front content
    </div>
    <div class="back">
        Back content
    </div>
</div>

引入js

只需在您的页面上包含 jquery.flip.js 即可。 jQuery Flip 依赖于jQuery，因此请确保首先包含它。

    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.flip.js" type="text/javascript"></script>
    <script>
        $("#card").flip({
            axis: "x",
            reverse: true,
            trigger: "click"
        });
    </script>

更多参数说明

  • axis 'y','x' 您要绕其旋转的轴

  • trigger 'click', 'hover','manual' 激活翻转动作的事件。使用manual意味着您必须通过 javascript 激活它。

  • reverse true,false 如果要反转翻转方向，请设置为true。

  • speed 500 翻转动画的持续时间（以毫秒为单位）。越高意味着越慢。

  • front '.front' 翻转选择器将用于查找可翻转内容的正面。

  • back '.back' 翻转选择器将用于查找可翻转内容的背面。

  • autoSize true,false 前面板和后面板是否应自动调整大小以适合容器。

  • forceWidth true,false 前面板和后面板是否应强制到容器的宽度。

  • forceHeight true,false 前后面板是否应强制至容器的高度。