最近做了个类似于塔罗牌翻牌的效果，分享给大家。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8"/>

    <title>flip</title>

    <style>

    *{margin:0;padding:0;}

    .content{background:orange;height:300px;margin:100px auto;width:200px;}

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

<script src="jquery.min.js"></script>

<script src="jquery-ui.min.js"></script>

<script src="jquery.flip.min.js"></script>

<script>

$(function(){

    $('.content').click(function(){

        var _this = $(this);

        _this.flip({

            direction: 'lr',

            content: '反转后显示的内容，反转后显示的内容，反转后显示的内容，反转后显示的内容',

            onEnd: function(){

                _this.css({

                    background: 'orange',

                    color: 'white'

                }).unbind('click');

            }

        });

    });

});

</script>

参数说明：

direction：翻转方向，总共有 4 个值（tb、bt、lr、rl），默认 tb

content：设置翻转后容器内显示的内容，可以是文本，可以是 html，甚至可以是 jquery 对象

color：设置翻转后容器的背景色

speed：设置翻转速度，值越小速度就越快

onBefore：设置翻转前需要执行的内容

onAnimation：设置翻转到一半的时候需要执行的内容

onEnd：设置翻转完成后需要执行的内容

PS：

jqueryui 需要加载 core 和 effects core

官网地址：Flip! A jQuery plugin v0.9.9

点击下载 demo

【jquery】基于 jquery 的翻牌效果 flip的更多相关文章

  1. 【JQuery插件】扑克正反面翻牌效果

    里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <ht ...

  2. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  3. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  4. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  5. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  6. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js

    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...

  7. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  8. 基于 jQuery 实现的精致作品集图片导航效果

    今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...

  9. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

随机推荐

  1. spring 项目中使用 hibernate validator验证输入参数

    1 hibernate validator 官方文档:https://docs.jboss.org/hibernate/stable/validator/reference/en-US/html_si ...

  2. Python语言的有限状态机实现样例

    #!/usr/bin/env python3 class Connection(object): def __init__(self): self.change_state(ClosedConnect ...

  3. 冰淇淋三明治 (Android 4.0)介绍

    原文:http://android.eoe.cn/topic/summary 冰淇淋三明治 (Android 4.0) 是 Android 在设计上的一个里程碑.它将 Honeycomb 提供给平板的 ...

  4. 腾讯云服务器 - 配置JDK环境以及Tomcat+nginx服务器

    安装完ngxin以及fastdfs后,那么jdk和tomcat是肯定要装的,本篇很简单,实在没啥好说的,都是基础,略微带一下,如果是大牛路过可以看看吐槽一下 云服务器上初识环境如果没有选择附带其他软件 ...

  5. 一种3D空间的柱状多边形检测实现

    最近无意中拓展出这个东西,基于之前写的2D多边形检测: http://www.cnblogs.com/hont/p/6105997.html 而判断两条线相交的方法替换成了我后来写的差乘判断: htt ...

  6. Atitit 软件体系的进化，是否需要一个处理中心

    Atitit 软件体系的进化,是否需要一个处理中心 1.1. 进化树上是没有主干的..1 1.2. ,软件进化的行为1::主要就是给新的应用编写新的程序.1 1.3. ,软件进化的行为2::软件的维护 ...

  7. nodejs中的框架介绍

    Sequelize 关系型数据库对象模型映射框架 mongoose 非关系型数据库文档模型映射框架

  8. non-deterministic-turing-machine

    https://stackoverflow.com/questions/13524011/i-do-not-understand-the-concept-of-non-deterministic-tu ...

  9. [Windows Azure] How to Create and Deploy a Cloud Service?

    The Windows Azure Management Portal provides two ways for you to create and deploy a cloud service: ...

  10. 漫游Kafka之过期数据清理【转】

    转自:http://blog.csdn.net/honglei915/article/details/49683065 Kafka将数据持久化到了硬盘上,允许你配置一定的策略对数据清理,清理的策略有两 ...