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. cowboy的get和post的例子

    官方get和post的代码是有问题的,1.1下运行crash,这里修改了下,贴代码 创建工程 rebar-creator create-app testCowboy testCowboy_app.er ...

  2. 1DAY 初识Python

    一 本节目标 了解编程语言 了解python及与其他语言的优劣对比 安装python解释器及环境变量配置.运行python交互式环境 打印hello world程序 初识变量.用户输入,流程控制,wh ...

  3. html5 模块

    1.<header> 网站头部标签2.<nav> 导航标签3.<article> 内容标签4.<section> 文章标签5.<aside> ...

  4. NoSQL v.s. RDB

    RDB 相对于 NoSQL 的劣势: 1. 集中式单点架构 2. 固定的数据模型: 可扩展性差,缺乏处理半结构化和非结构化数据的能力. 3. 扩容成本高:处理海量数据时存在性能瓶颈,大数据时代的存储需 ...

  5. Cassandra Wiki Login JmxSecurity

    JmxSecurity 监控和管理Cassandra

  6. C++ primer plus

    给cout指针,默认打印指针地址,但如果指针的类型的char*,将打印指向的字符串,如果要显示的是字符串的地址,将指针强制转换为另一种类型 char* animal cout << ani ...

  7. 神奇的make自动生成include file的功能

    嗯,今天研究公司makefile的代码,始终搞不明白有一段下载编译依赖的rule recipe(对这个名词不了解请参考make的官方文档)是怎么执行的.明明在执行的时候并指定的target并没有依赖那 ...

  8. [z]IE6各种不兼容问题

    http://blqw1.diandian.com/post/2012-01-12/16137399 http://www.cnblogs.com/qiangspecial/archive/2013/ ...

  9. keil5破解

    没有破解之前的keil只能编译限制大小的代码,72K好像我忘了?太长的话会报错. 注册机网址:http://bbs.armfly.com/read.php?tid=2346 1.在keil5左上角的F ...

  10. Spring -- <context:component-scan>使用说明

    在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controller@Service等这些注解的类,则把这些类 ...