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. cassandra的一些概念

    分区器Partitioners 在集群内,根据设置的副本数,决定数据如何分发,允许跨机房 具体看 http://teddymaef.github.io/learncassandra/cn/replic ...

  2. debian下qt4动态编译

    一句话不割,版本4.86 ./configure -prefix /home/用户名/Qt/dynamic -opensource -opengl -confirm-license -no-scrip ...

  3. python 网络编程--socket模块/struct模块

    socket模块: 客户端:CS架构,  client -> server 浏览器:BS架构,  browser -> server 网络通信本质:传输字节 doc命令查看ip地址:ipc ...

  4. android 手机UDP 接受不到数据

    一.有的手机不能直接接收UDP包,可能是手机厂商在定制Rom的时候把这个功能给关掉了. 1.可先在oncreate()方法里面实例化一个WifiManager.MulticastLock 对象lock ...

  5. GC之九--gc调优

    目标 满足应用的响应时间和吞吐量需求,尽量减少GC对应用的影响 原则 大部分时候都不需要调优GC,只需配置-Xms,-Xmx即可,JVM会自动进行调整 先满足响应时间需求,再满足吞吐量需求 FullG ...

  6. ROS的ovpn设置

    转摘至www.80uncle.com 先下载Win下的openvpn客户端http://openvpn.se/download.html 我的证书是用这个客户端做的openvpn-2.0.9-gui- ...

  7. MySQL添加数据库的唯一索引的几种方式~

    创建表时直接设置: DROP TABLE IF EXISTS `student`;CREATE TABLE `student` (  `stu_id` int(11) NOT NULL AUTO_IN ...

  8. PCI、PCI-x，PCI-E兼容以及他们之间的区别详细图解

    一.PCI PCI接口分为32bit和64bit两种,32bit就是一般台式机使用的普通的pci接口(图一.图三),64bit接口比32bit接口长一些一般只出现在服务器上(图四.图五).32bit和 ...

  9. 深入理解ceph-disk运行机制

    谷忠言 一,背景 目前项目所用的ceph集群内部的一个节点, 一般需要管理大约十块硬盘左右的数据存储空间,外加一到两块ssd组成的journal空间.Ceph要求每个osd对应的数据盘挂载到特定的目录 ...

  10. 一行命令解决 xcode升级新版本插件失效问题

    sudo find ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins -name Info.plist -maxdepth ...