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

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

效果如下图所示：

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

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

需要的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>

html

<!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/559ac93738a915c36ef67e94f65a3e37

最简单的调用方法就是： $(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

Flip的更多相关文章

  1. POJ 1753. Flip Game 枚举or爆搜+位压缩，或者高斯消元法

    Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 37427   Accepted: 16288 Descr ...

  2. [LeetCode] Flip Game 翻转游戏之二

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...

  3. [LeetCode] Flip Game 翻转游戏

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...

  4. poj Flip Game 1753 (枚举)

    Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 27005   Accepted: 11694 Descr ...

  5. POJ1753 Flip Game（bfs、枚举）

    链接:http://poj.org/problem?id=1753 Flip Game Description Flip game is played on a rectangular 4x4 fie ...

  6. poj1753 Flip Game

    题意:4*4的正方形,每个格子有黑白两面,翻转格子使得4*4个格子显示全黑或全白,翻转要求:选中的那个格子,以及其上下左右相邻的格子(如果存在)要同时翻转.输出最小的达到要求的翻转次数或者Imposs ...

  7. java.nio.ByteBuffer中flip,rewind,clear方法的区别

    对缓冲区的读写操作首先要知道缓冲区的下限.上限和当前位置.下面这些变量的值对Buffer类中的某些操作有着至关重要的作用: limit:所有对Buffer读写操作都会以limit变量的值作为上限. p ...

  8. NYOJ：题目529 flip

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=529 由于此题槽点太多,所以没忍住...吐槽Time: 看到这题通过率出奇的高然后愉快的进 ...

  9. Flip Game（dfs)

      Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32384   Accepted: 14142 Des ...

  10. [OpenJudge 3061]Flip The Card

    [OpenJudge 3061]Flip The Card 试题描述 There are N× Ncards, which form an N× Nmatrix. The cards can be p ...

随机推荐

  1. Juicer自定义函数

    首先,先写自定义的方法: function (sex) { ; ; var Range = Max - Min; var Rand = Math.random(); var res = (Min + ...

  2. python 文件操作的函数

    1. 文件操作的函数 open(文件名(路径), mode="?", encoding="字符集") 2. 模式: r, w, a, r+, w+, a+, r ...

  3. [Java][Web]ServletContext 方法的应用

    由于一个 Web 应用中的所有 Servlet 共享同一个 ServletContext 对象,所以多个 Servlet 通过 ServletContext 对象实现数据共享. ServletCont ...

  4. thinkphp如果表名有下划线需要用Model

    模型命名规范 ThinkPHP 对数据库的表名和模型类的命名遵循一定的规范.首先数据库的表名和字段全部采用小写形式,模型类的命名规则是除去表前缀的数据表名称,并且首字母大写,然后加上模型类的后缀定义. ...

  5. 重载(overload)，覆盖(override),隐藏(hide)的区别

    写正题之前,先给出几个关键字的中英文对照,重载(overload),覆盖(override),隐藏(hide).在早期的C++书籍中,可能翻译的人不熟悉专业用语(也不能怪他们,他们不是搞计算机编程的, ...

  6. python学习 (二十八) Python的for 循环

    1: for 循环可以循环如下类型: my_string = "abcabc" // 字符串类型 for c in my_string: print(c, end=' ') car ...

  7. tomcat：A docBase * inside the host appBase has been specifi, and will be ignored

    警告: A docBase  D:\apache-tomcat-8.5.12\webapps\webapps\projectname inside the host appBase has been ...

  8. Julia - 三元运算符

    三元运算符的格式: a ? b : c a 是条件表达式,如果条件 a 为真,就执行 b:如果条件 a 为假,就执行 c 二选一 julia> println(1 < 2 ? " ...

  9. 流媒体协议部分RTP、RTCP、RTSP、MMS、HLS、HTTP progressive streaming

    流媒体协议:(RTP.RTCP.RTSP.MMS.HLS.HTTP progressive streaming) 当前在internet上传送音频和视频等信息主要有两种方式: 下载,完整下载一个视频, ...

  10. 如何清除svn的账号缓存信息（solaris）

    如果我们不小心输入svn账号错误的话,后面就一直提示认证失败,不能checkout代码. 这个是因为svn把你输入的账号进行了缓存. 如果我们想重新输入新的账号,必须要清除缓存 svn存储账号的目录在 ...