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

<!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. fdatool的滤波器设计

    作者:桂. 时间:2017-08-15  20:28:11 链接:http://www.cnblogs.com/xingshansi/p/7367738.html 前言 本文主要记录滤波器设计的基本流 ...

  2. PHP的生成器、yield和协程

    虽然之前就接触了PHP的yield关键字和与之对应的生成器,但是一直没有场景去使用它,就一直没有对它上心的研究.不过公司的框架是基于php的协程实现,觉得有必要深入的瞅瞅了. 由于之前对于生成器接触不 ...

  3. Linux学习笔记--SSH免password登录

    须要实现的效果: 有两台server:"192.168.201.236" 和 "192.168.201.237" 须要实现:在server"192.1 ...

  4. windows下bash终端--git-bash总汇

    git bash是一个比较好用的终端(win下),但有一些细节需要调整后才好用. 1.比如,登陆后终端的表格,以及个别符号显示为乱码. 解决方法: 1).点击git bash左上角,选择“option ...

  5. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  6. 转：\r,\n,\r\n的区别

    回车.换行的区别   他们间的区别其实是个回车换行的问题 先来段历史 回车”(Carriage Return)和“换行”(Line Feed)这两个概念的来历和区别. 符号        ASCII码 ...

  7. Quantum Computation and Quantum Information

    https://www.amazon.com/Quantum-Computation-Information-10th-Anniversary/dp/1107002176/ref=asap_bc?ie ...

  8. [SQL in Azure] Configure a VNet to VNet Connection

    http://msdn.microsoft.com/en-us/library/azure/dn690122.aspx Configure a VNet to VNet Connection 2 ou ...

  9. [Windows Azure] Create a Virtual Network in Windows Azure

    Create a Virtual Network in Windows Azure This tutorial walks you through the steps to create a basi ...

  10. Java的数组和list升序，降序，逆序函数Collections.sort和Arrays.sort的使用

    list升序,降序,逆序List<Integer>list =new ArrayList<Integer>();//如果list是 5 7 2 6 8 1 41.升序:Coll ...