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

 更新时间:2016年09月20日 15:24:47   作者:朱羽佳  
这篇文章主要介绍了jQuery flip插件实现的翻牌效果,可实现类似卡罗牌翻页的视觉效果,涉及jquery.flip.min.js插件的使用,并附带demo源码供读者下载参考,需要的朋友可以参考下

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

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

运行效果图如下:

具体代码如下:

<!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相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

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

相关文章

  • jquery slibings选取同级其他元素的实现代码

    jquery slibings选取同级其他元素的实现代码

    jquery选取同级其他元素可以使用slibings方法,end方法可以清除之前的链式操作,相当于重新开始
    2013-11-11
  • jQuery中has()方法用法实例

    jQuery中has()方法用法实例

    这篇文章主要介绍了jQuery中has()方法用法,实例分析了has()方法的功能、定义及保留包含特定后代的匹配元素的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery Ajax之$.get()方法和$.post()方法

    jQuery Ajax之$.get()方法和$.post()方法

    load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现Ajax的全部价值。在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是后面要讲解到的$.ajax方法)。
    2009-10-10
  • jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

    jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

    这篇文章主要介绍了jQuery实现漂亮实用的商品图片tips提示框效果,具有鼠标滑过显示动态提示框的效果,涉及针对鼠标事件的响应及页面元素动态操作技巧,需要的朋友可以参考下
    2016-04-04
  • JQuery 写的个性导航菜单

    JQuery 写的个性导航菜单

    浏览者是否对网站感兴趣,前20秒的第一印象至关重要,所以我们的设计要符合大众的期望。下面我们将设计一个个性的导航菜单。
    2009-12-12
  • jquery浏览器滚动加载技术实现方案

    jquery浏览器滚动加载技术实现方案

    Google阅读器上有一个AJAX效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。对于我来说再好不过了,因为我很不喜欢翻页,尤其是输入页码再定位到页。
    2014-06-06
  • 使用jQuery 操作table 完成单元格合并的实例

    使用jQuery 操作table 完成单元格合并的实例

    下面小编就为大家分享一篇使用jQuery 操作table 完成单元格合并的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • jQuery实现标题有打字效果的焦点图代码

    jQuery实现标题有打字效果的焦点图代码

    这篇文章主要介绍了jQuery实现标题有打字效果的焦点图代码,可实现幻灯片切换显示时标题同步逐个打印显示的效果,涉及jQuery操作json格式数据及时间函数的相关技巧,需要的朋友可以参考下
    2015-11-11
  • 正负小数点后两位浮点数实现原理及代码

    正负小数点后两位浮点数实现原理及代码

    需要做个对两位小数点的正负浮点数的处理要求:非数字或者.字符自动清除,并对.12自动修补.前的0,实现原理如下,感兴趣的朋友可以参考下
    2013-09-09
  • 基于jquery的监控数据是否发生改变

    基于jquery的监控数据是否发生改变

    在实际开发中经常会遇到数据没发生改变是,由于用户不小心点击保存,这样导致数据库的日志增大;还有数据填写好后,忘了添加保存直接关闭页面离开。
    2011-04-04

最新评论