里面有两个demo，支持X横向和Y纵向翻转两个效果。

对元素的布局有一定的讲究，需要分析一下demo的css。

默认翻转速度为80，不要大于100ms。

<!DOCTYPE>

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>【JQuery插件】扑克正反面翻牌效果</title>

		<style>

			*{margin:0px;padding:0px;list-style:none;font-size: 16px;}

		</style>

	</head>

	<body>

		<style>

			.demo1 {margin:10px; width: 200px;height: 100px;text-align: center;position: relative;}

			.demo1 .front{width: 200px;height: 100px;position:absolute;left:0px;top:0px;background-color: #000;color: #fff;}

			.demo1 .behind{width: 200px;height: 0px;position:absolute;left:0px;top:50px;background-color: #ccc;color: #000;display: none;}

		</style>

		<h1>demo1 y轴 (css布局提示：背面默认隐藏 height为0 top是高度的一半也就是demo中间)</h1>

		<div class="demo1">

			<div class="front">正面正面正<br/>面正面正面<br/></div>

			<div class="behind">背面</div>

		</div>

		<div class="demo1">

			<div class="front">正面</div>

			<div class="behind">背面</div>

		</div>

		<style>

			.demo2 {margin:10px; width: 200px;height: 100px;text-align: center;position: relative;}

			.demo2 .front{width: 200px;z-index: 1; height: 100px;position:absolute;left:0px;top:0px;background-color: #000;color: #fff;}

			.demo2 .behind{width: 0;height: 100px;z-index: 0;position:absolute;left:100px;top:0;background-color: #ccc;color: #000;}

		</style>

		<h1>demo2 x轴(css布局提示：背面默认隐藏 width为0 left是宽度的一半也就是demo中间)</h1>

		<div class="demo2">

			<div class="front">正面</div>

			<div class="behind">背面</div>

		</div>

		<div class="demo2">

			<div class="front">正面</div>

			<div class="behind">背面</div>

		</div>

<script type="text/javascript" src="http://static.cnmo-img.com.cn/js/jquery144p.js"></script>

<script>

(function($) {

	/*

	====================================================

	【JQuery插件】扑克翻牌效果

	@auther LiuMing

	@blog http://www.cnblogs.com/dtdxrk/

	====================================================

	@front:正面元素

	@behind:背面元素

	@direction:方向

	@dis:距离

	@mouse: 'enter' 'leave' 判断鼠标移入移出

	@speed: 速度 不填默认速度80 建议不要超过100

	*/

	var OverTurnAnimate = function(front, behind, direction, dis, mouse, speed){

		/*判断移入移出*/

		var $front = (mouse == 'enter') ? front : behind,

			$behind = (mouse == 'enter') ? behind : front;

		$front.stop();

		$behind.stop();

		if(direction == 'x'){

			$front.animate({left: dis/2,width: 0},speed, function() {

				$front.hide();

				$behind.show().animate({left: 0,width: dis},speed);

			});

		}else{

			$front.animate({top: dis/2,height: 0},speed, function() {

				$front.hide();

				$behind.show().animate({top: 0,height: dis},speed);

			});

		}

	};

	/*

	@demo

	$('.demo1').OverTurn(@direction, @speed);

	@direction(String)必选 'y' || 'x' 方向

	@speed(Number)可选 速度

	*/

	$.fn.OverTurn = function(direction, speed) {

	    /*配置参数*/

	    if(direction!='x' && direction!='y'){throw new Error('OverTurn arguments error');}

	    $.each(this, function(){

	    	var $this = $(this),

	    		$front = $this.find('.front'),

	    		$behind = $this.find('.behind'),

	    		dis = (direction=='x') ? $this.width() :$this.height(),

	    		s = Number(speed) || 80;/*默认速度80 建议不要超过100*/

	      	$this.mouseenter(function() {

  				OverTurnAnimate($front, $behind, direction, dis, 'enter', s);

			}).mouseleave(function() {

  				OverTurnAnimate($front, $behind, direction, dis, 'leave', s);

			});

	    });

	};

})(jQuery);

/*插件引用方法y*/

$('.demo1').OverTurn('y',100);/*speed不填默认速度80 建议不要超过100*/

/*插件引用方法x*/

$('.demo2').OverTurn('x');

</script>

</body>

</html>

　　

【JQuery插件】扑克正反面翻牌效果的更多相关文章

  1. 【CSS3 DEMO】扑克正反面翻牌效果

    在线预览地址:http://dtdxrk.github.io/game/css3-demo/drawbox.html 用到两个属性: 一个是动画时间 transition-duration: 0.8s ...

  2. ASP.NET中使用jQuery插件实现图片幻灯效果

    参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...

  3. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  4. 【jquery插件】-网页下雪效果

        又到了年底,从圣诞节开始,可以发现各大网站的活动是越来越多,都变的银装素裹,本人由于业务需求也需要做这么一个效果,所以就通过google大神找了一下相关资源,结果就出现了N种雪花效果的方式.种 ...

  5. 【最新】2015年7月之15个最新jQuery插件

    Hello,一个激动人心的好消息,现在我为大家整理最近7月发布的jQuery插件. 如果你熟悉任何下面列出的插件,请分享你的反馈与我们的读者,或如果你知道哪一个我们没有收录,那么请与我们分享在下面的评 ...

  6. 2013年优秀jQuery插件

    今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...

  7. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  8. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  9. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件（一）

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

随机推荐

  1. Centos 下 Apache 原生 Hbase + Phoenix 集群安装（转载）

    前置条件 各软件版本:hadoop-2.7.7.hbase-2.1.5 .jdk1.8.0_211.zookeeper-3.4.10.apache-phoenix-5.0.0-HBase-2.0-bi ...

  2. (尚017)Vue插件

    1.如何开发插件? 2.编写自己的vue-myPlugin.js插件库,代码如下: /** * vue的插件库 * 最好使用匿名函数包裹起来,这样代码会更加规范 * 里面的实现被隐藏了 */(func ...

  3. 《挑战30天C++入门极限》新手入门：C++中的函数重载

        新手入门:C++中的函数重载 函数重载是用来iostream>  using namespace std;  int test(int a,int b);  float test(flo ...

  4. Pytest权威教程09-捕获标准输出及标准错误输出

    目录 捕获标准输出及标准错误输出 默认 stdout/stderr/stdin 捕获行为 设置捕获方法或禁用捕获 调试中使用print语句 在测试用例中使用的捕获的输出 返回: Pytest权威教程 ...

  5. 区块链阶段1-Linux基础- 2 Linux文件系统

    2.1 什么是文件系统 文件系统是操作系统在磁盘或分区上组织文件的方法和数据结构.负责对磁盘空间进行组织和分配,存储文件数据,并对其提供保护和检索服务.学习Linux,首先需要了解整个 Linux 文 ...

  6. 线程池(3)-参数-实现ThreadFactory

    1.介绍 ThreadFactory用来创建线程,需要实现newThread方法. 2.常用场景 线程重命名 设置守护进程 设置优先级 3.示例(线程重命名) public class ThreadF ...

  7. 数据结构Java版之深度优先-图（十二）

    这里用深度优先遍历存在矩阵里面的图. 深度优先利用的是栈的FIFO特性.为此遍历到底后,可以找到最相邻的节点继续遍历.实现深度优先,还需要在节点加上一个访问标识,来确定该节点是否已经被访问过了. 源码 ...

  8. 基于Redis的分布式锁到底安全吗（上）？

    基于Redis的分布式锁到底安全吗(上)?  2017-02-11 网上有关Redis分布式锁的文章可谓多如牛毛了,不信的话你可以拿关键词“Redis 分布式锁”随便到哪个搜索引擎上去搜索一下就知道了 ...

  9. CentOS下载与服务器版安装(VMware)

    1. 下载 首先需要选择一个版本,因为华为云最新只提供了CentOS 7.6,所以要选择CentOS 7版本的. 官网只提供了最新的版本,而且服务器在国外,下载速度贼慢. 不过官方提供了分布在各个地区 ...

  10. python棱形继承（钻石继承）

    class A(object): def func(self): print('A') class B(A): def func(self): super().func() print('B') cl ...