Flip

时间 2019-11-08

标签 flip 繁體版

原文原文链接

　　Flip是一个可以让任意HTML、文本或jQuery Element产生漂亮翻转效果的jQuery插件。javascript

能够配置翻转方向：从右到左、上到下或从左到右、下到上。翻转的速度也能够配置。 css

效果以下图所示：html

官网：http://lab.smashup.it/flip/ （貌似被墙了，须要....一下）java

兼容性：Firefox, Chrome/Chromium, Opera, Safari and even IE 6+jquery

须要的js文件：jQuery、 jQueryUI core、jQueryUI effects core、flip函数

Demo测试

须要的js文件（测试发现，没有jquery.ui.core.min.js，貌似也能够）。动画

<script type="text/javascript" src="js/jquery8.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.effect.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.min.js"></script>

htmlui

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>index</title>
        <script type="text/javascript" src="js/jquery8.js"></script>
        <script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.effect.min.js"></script>
        <script type="text/javascript" src="js/jquery.flip.min.js"></script>
        <style type="text/css" >
            #demo1 {
                height: 200px;
                width: 200px;
                line-height:200px;
                margin: 50px auto;
                background: red;
                text-align: center;
                color: #ddd;
                font-weight: bold;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("#demo1").click(function() {
                    var $this=$(this);
                    $(this).flip({
                        direction : 'lr',
                        color : "red",
                        speed:500,
                        onBefore : function() {
                            console.info('在开始动画以前');
                        },
                        onAnimation : function() {
                            console.info('在动画中间');
                        },
                        onEnd : function() {
                            $this.revertFlip();
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="demo1">
            翻滚吧！
        </div>
    </body>
</html>

本示例文件：http://url.cn/TU9Q6T 或 http://share.weiyun.com/559ac93738a915c36ef67e94f65a3e37this

最简单的调用方法就是： $(selector).flip({}); 既能够实现效果。

若是有更加复杂的要求，有下面几个参数能够调用：

content

定义翻转后元素的新内容，能够是：文本、 HTML 或 jQuery 对象

direction

定义元素翻转的方向，可选：tb/bt/lr/rl ，默认为 tb

color

定义元素翻转后的背景颜色，默认是 #999999

speed

定义翻转的速度，默认为 500 毫秒

onBefore

定义元素翻转以前的回调函数

onAnimation

定义元素翻转到一半时的回调函数

onEnd

定义元素翻转以后的回调函数

经典案例：http://www.siteserver.cn/case/

参考：http://www.camnpr.com/archives/jquery-flip-360-degree-flip-jquery-slicebox-3d-effect.html

1. Flink - FLIP
2. Flip Game&&dfs
3. 294. Flip Game II
4. poj 1753 Flip Game
5. Flip Game POJ-1753
6. cv flip函数
7. poj 1753 -- Flip Game
8. java.nio.Buffer flip()方法
9. Flip Game POJ - 1753
10. Flip Game / POJ 1753
更多相关文章...
• jQuery Mobile 过渡 - jQuery Mobile 教程
• jQuery Mobile Data 属性 - jQuery Mobile 教程