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

<!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. GitHub创始人：我如何放弃30万美元年薪创业

    GitHub创始人:我如何放弃30万美元年薪创业 本文摘自GitHub创始人Tom Preston Werner个人博客. 时间还在2007年,我一个人独坐旧金山的Zeke 体育酒吧内.其实我并不经常 ...

  2. java学习记录--ThreadLocal使用案例

    本文借由并发环境下使用线程不安全的SimpleDateFormat优化案例,帮助大家理解ThreadLocal. 最近整理公司项目,发现不少写的比较糟糕的地方,比如下面这个: public class ...

  3. Centos 7 使用iptables

    systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止firewall开机启动 #安装 ...

  4. Linux应用server搭建手冊—Weblogic服务域的创建与部署

         前一篇谈到了Weblogic的安装,接下来整理weblogic服务域的创建及项目的部署      一.webLogic服务域创建          使用root用户登录后使用命令:#su W ...

  5. C++中关于指针运算符->的重载问题

    #include<iostream>using namespace std;struct date{ int year; int month; int day;};struct Perso ...

  6. win2016安装postgresql安装不了的问题

    我在阿里云的win2016服务器上下载postgresql,结果怎么都装不上. 双击 Exe没有 任何 反映 .. ... 网上搜索不出..在N个群里问 ,终于碰到有人和我一样的问题了..原来是阿里云 ...

  7. [svc]nginx限制客户端上传附件的大小

    300 行 python 代码的轻量级 HTTPServer 实现文件上传下载 系统环境 [root@n1 conf]# cat /etc/redhat-release CentOS Linux re ...

  8. 【Unity】3.4 将现有的3ds Max模型导入到Unity

    分类:Unity.C#.VS2015 创建日期:2016-04-05 一.简介 这一节我们用一个带有"装子弹和上膛"动画的"枪"模型,介绍在3ds Max 20 ...

  9. DBeaver利用方式简介

    当攻击者能够进入内网,同时发现某台服务器装有弱口令的数据库时,除了在console中查看数据库信息外, 还可以利用第三方工具进行数据库读取,本例中使用DBeaver进行查看. 1. 下载DBeaver ...

  10. [Windows Azure] .NET Multi-Tier Application Using Storage Tables, Queues, and Blobs - 1 of 5

    .NET Multi-Tier Application Using Storage Tables, Queues, and Blobs - 1 of 5 This tutorial series sh ...