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 相关文章推荐
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
Javascript的一种模块模式
2010/09/08 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python中isnumeric()方法的使用简介
2015/05/19 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
python数据爬下来保存的位置
2020/02/17 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
小学生环保演讲稿
2014/04/25 职场文书
人事经理岗位职责
2014/04/28 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
大学生暑假实习总结
2015/07/13 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js