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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
Vue和React组件之间的传值方式详解
Jan 31 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
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 date与gmdate的获取日期的区别
2010/02/08 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
分页栏的web标准实现
2011/11/01 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
深入理解javascript中的this
2021/02/08 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python手机号码归属地查询代码
2016/05/04 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python API自动化框架总结
2019/11/12 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
行政助理求职自荐信
2013/10/26 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
作风建设演讲稿
2014/05/23 职场文书
兽医医药专业求职信
2014/07/27 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
心得体会格式及范文
2016/01/25 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL