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. Excel不同工作簿之间提取信息

    Sub 不同工作簿间提取信息() '用于单个字段信息的提取: Dim w As Workbook, wb1 As Workbook, wb2 As Workbook, wb3 As Workbook ...

  2. struts2学习(4)struts2核心知识III

    一.result配置: result - name 就是前面返回的值,success,error等. type: dispatcher. 默认是这个,底层是jsp的forward: redirect: ...

  3. appium+python自动化40-adb offline(5037端口被占)

    前言 adb连手机的时候经常会出现offline的情况,一般杀掉adb,然后重启adb可以解决. 如果发现不管怎么重启adb都连不上,一直出现offlie的情况,这个时候很大可能就是adb的5037端 ...

  4. Java-Runoob-高级教程：Java 文档注释

    ylbtech-Java-Runoob-高级教程:Java 文档注释 1.返回顶部 1. Java 文档注释 Java 支持三种注释方式.前两种分别是 // 和 /* */,第三种被称作说明注释,它以 ...

  5. canvas之画圆

    <canvas id="canvas" width="500" height="500" style="background ...

  6. Java死锁以及命令检测

    Java每个对象都有一把锁,当前进程使用对象锁1,没有释放该锁,又想要去获取另一把对象锁2,而对象锁2被另外一个线程持有,没有释放,这就很容易出现死锁 1.死锁实例 public class Dead ...

  7. EntityFramework 更新数据库字段的三种方法

    例: 实体类: public class TestDbContext : DbContext { public DbSet<Test> Tests { get; set; } public ...

  8. ceph---luminous版的安装

    前言 ceph luminous版本新增加了很多有意思的功能,这个也是一个长期支持版本,所以这些新功能的特性还是很值得期待的,从底层的存储改造,消息方式的改变,以及一些之前未实现的功能的完成,都让ce ...

  9. canvas下载图片

    canvas下载图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  10. Latex编译后Yap查看报错Not all fonts could be loaded

    在用Latex写中文大论文时,编译后,用Yap查看DVI文件,打开时,Yap报错: "Not all fonts could be loaded. See 'File->Documen ...