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

<!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. Android Logcat信息级别解读

    Android Logcat信息级别解读 Logcat信息分为好几个级别,分别是:Assert(断言).Debug(调试).Error(错误).Info(信息).Verbose(详细).Warning ...

  2. MTStatusBarOverlay (状态栏，添加自定义内容库)

    NSString * message = [NSString stringWithFormat:@"%@成功", text]; MTStatusBarOverlay *overla ...

  3. 三星 S4 手机误删除相片（相册）后的恢复问题，仅记录处理过程，其它Android手机同样适用

    无意中删除了三星S4手机中相机的相册.过程是这样的,用手机拍了几张照片,觉得最后那张拍得不好,想删除,于是进入相册,看到有那张照片的图标,选择,删除,悲剧发生了! 这里得说三星的不好:在相册中,相册文 ...

  4. RSA算法 JS加密 JAVA解密

    有这样一个需求,前端登录的usernamepassword,password必需加密.但不可使用MD5,由于后台要检測password的复杂度,那么在保证安全的前提下将password传到后台呢,答案 ...

  5. layer-list：Android中layer-list使用详解

    使用layer-list可以将多个drawable按照顺序层叠在一起显示,默认情况下,所有的item中的drawable都会自动根据它附上view的大小而进行缩放, layer-list中的item是 ...

  6. 谷歌Chrome浏览器小于12px字号显示的BUG

    webkit的私有属性:html{-webkit-text-size-adjust:none;}

  7. c++中数据表如何转成业务实体--map和结构体的相互转换

    应用场景:如何把数据库表中的一行转换成一个业务实体结构体,c#和java中都有实体框架,表到实体的转换很方便,c++中缺少这些框架,但是有一些折中的办法去做.其实问题的本质是:map如何转成结构体. ...

  8. 每天一个linux命令(6) ar命令

    当我们的程序中有经常使用的模块,而且这种模块在其他程序中也会用到,这时按照软件重用的思想,我们应该将它们生成库,使得以后编程可以减少开发代码量.这里介绍命令ar,用来对库操作. ar命令可以用来创建. ...

  9. 每日英语：China Destroys Six Tons of Confiscated Ivory

    BEIJING—Chinese government officials destroyed more than six tons of ivory that had been illegally s ...

  10. hive里的group by和distinct

    hive里的group by和distinct 前言 今天才明确知道group by实际上还是有去重读作用的,其实细想一下,按照xx分类,肯定相同的就算是一类了,也就相当于去重来,详细的看一下. gr ...