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. nginx statistics in multi-workers

    1.      从网上下载多进程统计补丁.https://github.com/arut/nginx-patches 2.      Copy补丁文件per-worker-listener到nginx ...

  2. java代码---实现随机产生1000个随机数，并10个一行的输出

    总结:不会用,就是不熟 package com.s.x; //输入10个随机数,并显示最大值,最小值 import java.util.*; public class Value { public s ...

  3. 微信APP支付整体流程记录备忘

      支付整体流程见文档:https://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=8_3   商户系统和微信支付系统主要交互说明:     步骤1: ...

  4. 安装配置solr

    1.由于用户是普通用户,没有root一些权限,所以修改hadoop用户权限 用root权限,修改sudoers文件 nano    /etc/sudoers   打开文件,修改hadoop用户权限,如 ...

  5. PHP中使用mkdir创建多级目录的方法

    function mkdirs($dir)    {    if(!is_dir($dir))    {    if(!mkdirs(dirname($dir))){    return false; ...

  6. python学习笔记（十一）：网络编程

    一.python操作网络,也就是打开一个网站,或者请求一个http接口,使用urllib模块. urllib模块是一个标准模块,直接import urllib即可,在python3里面只有urllib ...

  7. IDA Pro 权威指南学习笔记(十二) - IDA 中的注释

    注释有助于以一种更高级的方式描述汇编语言指令序列 IDA 提供了几种不同类型的注释,每种注释适用于不同的目的 使用 Edit -> Comments 命令的选项,可以为反汇编代码清单中的任何一行 ...

  8. spring 4.0+quartz2.2 实现持久化

    最近在搭建框架 用到quartz持久化这块 查了一些文档  如下配置即可. 这里是quartz官方提供配置步骤 http://www.quartz-scheduler.org/ Quartz包含三个抽 ...

  9. 热门数据挖掘模型应用入门（一）: LASSO回归

    热门数据挖掘模型应用入门(一): LASSO回归 2016-10-10 20:46 作者简介: 侯澄钧,毕业于俄亥俄州立大学运筹学博士项目, 目前在美国从事个人保险产品(Personal Line)相 ...

  10. Oracle播放多条 INSERT ALL

    Oracle INSERT ALL 语句介绍 Oracle INSERT ALL 语句用来用一个 INSERT 语句添加多行.该行可以只使用一个SQL命令插入到一个表或多个表. 语法 Oracle I ...