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

<!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. springboot 整合 Redis 方法二

    方法一请参考之前博文 spring boot 整合 redis 自己的版本  java8 + redis3.0 + springboot 2.0.0 1 spring boot已经支持集成 redis ...

  2. java打印条形码Code128C

    生成编码类型为Code128C的条形码的javaCODE: package test; import java.awt.Color; import java.awt.Graphics; import ...

  3. 微信小程序JS导出和导入

    1. 导出 1.1 方法和变量导出(写在被导出方法和变量的js文件) module.exports = { variable: value, method : methodName } 1.2 cla ...

  4. ms12_004漏洞进行渗透

    环境: 攻击机:kail linux (IP:192.168.31.54) 目标机:winds 7 (IP:192.168.31.136) 1.启动metaspolit 2.输入命令search ms ...

  5. bestcoder 48# wyh2000 and a string problem (水题)

    wyh2000 and a string problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K ...

  6. MariaDB/MySql 服务消失无法启动

    今天启动电脑打开数据库发现这么一个错误:  2003 can't connect to mysql server on localhost 10038  无奈去查看了服务,发现mysql服务消失了,猜 ...

  7. js中实现对checkbox选中和取消

    可以使用 element.attr('checked','checked') 来进行选中.但是不能使用 element.attr('checked','false') 来取消选中. 必须通过以下方式: ...

  8. 【设计模式】装饰器模式与Java Servlet、Spring Session在其中的使用

    简述 装饰器模式,可以通过装饰器类,通过依赖原实现的方式(不使用继承),达到扩展原实现的目的.UML图如下: ServletRequestWrapper于其中的使用 ServletRequestWra ...

  9. Spring和Mybatis整合过程中遇到的一个找不到sqlSessionFactory或sqlSessionTemplate的异常

    先看启动web项目时IDEA控制台抛出的异常(红色部分): D:\tomcat-kafka-\bin\catalina.bat run [-- ::,] Artifact Gradle : com.x ...

  10. c++11支持类数据成员的初始化

    在阅读TCPL第四版的时候看到,c++11支持类数据成员的初始化(In-Class Initializer),很有意思的功能. 测试代码如下: class Date { int year{2015}; ...