Flip
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
,默认为 tbcolor
定义元素翻转后的背景颜色,默认是 #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的更多相关文章
- POJ 1753. Flip Game 枚举or爆搜+位压缩,或者高斯消元法
Flip Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 37427 Accepted: 16288 Descr ...
- [LeetCode] Flip Game 翻转游戏之二
You are playing the following Flip Game with your friend: Given a string that contains only these tw ...
- [LeetCode] Flip Game 翻转游戏
You are playing the following Flip Game with your friend: Given a string that contains only these tw ...
- poj Flip Game 1753 (枚举)
Flip Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 27005 Accepted: 11694 Descr ...
- POJ1753 Flip Game(bfs、枚举)
链接:http://poj.org/problem?id=1753 Flip Game Description Flip game is played on a rectangular 4x4 fie ...
- poj1753 Flip Game
题意:4*4的正方形,每个格子有黑白两面,翻转格子使得4*4个格子显示全黑或全白,翻转要求:选中的那个格子,以及其上下左右相邻的格子(如果存在)要同时翻转.输出最小的达到要求的翻转次数或者Imposs ...
- java.nio.ByteBuffer中flip,rewind,clear方法的区别
对缓冲区的读写操作首先要知道缓冲区的下限.上限和当前位置.下面这些变量的值对Buffer类中的某些操作有着至关重要的作用: limit:所有对Buffer读写操作都会以limit变量的值作为上限. p ...
- NYOJ:题目529 flip
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=529 由于此题槽点太多,所以没忍住...吐槽Time: 看到这题通过率出奇的高然后愉快的进 ...
- Flip Game(dfs)
Flip Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 32384 Accepted: 14142 Des ...
- [OpenJudge 3061]Flip The Card
[OpenJudge 3061]Flip The Card 试题描述 There are N× Ncards, which form an N× Nmatrix. The cards can be p ...
随机推荐
- cowboy的get和post的例子
官方get和post的代码是有问题的,1.1下运行crash,这里修改了下,贴代码 创建工程 rebar-creator create-app testCowboy testCowboy_app.er ...
- 1DAY 初识Python
一 本节目标 了解编程语言 了解python及与其他语言的优劣对比 安装python解释器及环境变量配置.运行python交互式环境 打印hello world程序 初识变量.用户输入,流程控制,wh ...
- html5 模块
1.<header> 网站头部标签2.<nav> 导航标签3.<article> 内容标签4.<section> 文章标签5.<aside> ...
- NoSQL v.s. RDB
RDB 相对于 NoSQL 的劣势: 1. 集中式单点架构 2. 固定的数据模型: 可扩展性差,缺乏处理半结构化和非结构化数据的能力. 3. 扩容成本高:处理海量数据时存在性能瓶颈,大数据时代的存储需 ...
- Cassandra Wiki Login JmxSecurity
JmxSecurity 监控和管理Cassandra
- C++ primer plus
给cout指针,默认打印指针地址,但如果指针的类型的char*,将打印指向的字符串,如果要显示的是字符串的地址,将指针强制转换为另一种类型 char* animal cout << ani ...
- 神奇的make自动生成include file的功能
嗯,今天研究公司makefile的代码,始终搞不明白有一段下载编译依赖的rule recipe(对这个名词不了解请参考make的官方文档)是怎么执行的.明明在执行的时候并指定的target并没有依赖那 ...
- [z]IE6各种不兼容问题
http://blqw1.diandian.com/post/2012-01-12/16137399 http://www.cnblogs.com/qiangspecial/archive/2013/ ...
- keil5破解
没有破解之前的keil只能编译限制大小的代码,72K好像我忘了?太长的话会报错. 注册机网址:http://bbs.armfly.com/read.php?tid=2346 1.在keil5左上角的F ...
- Spring -- <context:component-scan>使用说明
在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controller@Service等这些注解的类,则把这些类 ...