jQuery flip插件实现的翻牌效果示例【附demo源码下载】


Posted in Javascript onSeptember 20, 2016

本文实例讲述了jQuery flip插件实现的翻牌效果。分享给大家供大家参考,具体如下:

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

运行效果图如下:

jQuery flip插件实现的翻牌效果示例【附demo源码下载】

具体代码如下:

<!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

官网地址:

http://lab.smashup.it/flip/

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 #Javascript
AngularJS删除路由中的#符号的方法
Sep 20 #Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 #Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 #Javascript
原生js实现ajax方法(超简单)
Sep 20 #Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 #Javascript
原生js封装的一些jquery方法(详解)
Sep 20 #Javascript
You might like
解析thinkphp基本配置 convention.php
2013/06/18 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
php post换行的方法
2020/02/03 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
document.compatMode介绍
2009/05/21 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
python实现logistic分类算法代码
2020/02/28 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
python 实现汉诺塔游戏
2020/11/28 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
.net工程师笔试题
2012/06/09 面试题
资金主管岗位职责范本
2014/03/04 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书