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. (转)Inno Setup入门（三）——指定压缩方式

    本文转载自:http://blog.csdn.net/augusdi/article/details/8564796 Setup段中的compression指定了采用的压缩方式,较高的压缩率需要较多的 ...

  2. Msys2+mingw-w64 编译VS2013使用的ffmpeg静态库注意事项

    1.环境准备 第一步:从http://sourceforge.net/projects/msys2/下载msys2的安装程序安装msys2; 第二步:通过msys2的包管理工具pacman安装ming ...

  3. json工具性能比较：json-lib和jackson进行Java对象到json字符串序列化[转]

    网上查找“java json”,发现大家使用最多的还是json-lib来进行java对象的序列化成json对象和反序列化成java对象的操作.但是之前在网上也看到过一往篇关于json序列化性能比较的文 ...

  4. Git回版本回退

    这里我们使用命令行的方式对已经提交的版本进行强行回退操作~~~ 一.将git的安装目录bin放到path路径中, 如下图所示: 二.进入cmd界面,依次输入下面内容即可(git 远程仓库 回退到指定版 ...

  5. VMware 虚拟机中添加新硬盘的方法(转载)

    随着在虚拟机中存储的东西的逐渐的增加,虚拟机的硬盘也逐渐告急,因此急需拓展一块新的虚拟磁盘.以下便是在VMware 中添加新的虚拟磁盘的方法:   一.VMware新增磁盘的设置步骤 (建议:在设置虚 ...

  6. css ! important 兼容性的一点测试

    css ! important 这个东西网上一堆内容,我只说我用到的一点地方和我的理解, 这个东西ie6不支持,ie高版本是支持的.其他浏览器也是支持.先理解这一点 .abc { width:100p ...

  7. Mysql--产品支持的平台

  8. 将自己数据转化为cifar10支持的lmdb

    大家都知道,在caffe里面,要运行cifar10的例子就得先由cifar10的数据库.由于caffe为了提高运行效率,减少磁盘寻道时间等,统一了数据接口(lmdb,leveldb). 首先,看一下c ...

  9. 高效率terminal和sublime 相互启动

    在日常的工作中,我们经常使用到terminal和Sublime .今天给大家介绍下怎样高效率的实现terminal和sublime 相互启动 (这里说的是MAC环境,我用的是Sublime Text ...

  10. win7 wifi

    win7 wifi the settings saved on this computer for the network do not match the requirements of the n ...