里面有两个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. Acwing P274 移动服务 题解

    每日一题 day21 打卡 Analysis DP的状态为已经完成的请求数量,通过指派一位服务员可以把”完成i - 1个请求的状态”转移到”完成i个请求的状态”那么我们可以知道转移从dp[i - 1] ...

  2. C# winform Panel 添加 滚动条

    Detailed discussion here. Try this instead for 'only' scrolling vertical.(auto scroll needs to be fa ...

  3. Apache Kylin在美团点评的应用

      本文原载自大数据杂谈微信公众号. 感谢美团点评工程师高大月撰文并授权转载. 高大月,美团点评工程师,Apache Kylin PMC成员,目前主要在美团点评数据平台负责OLAP查询引擎的建设. 背 ...

  4. (尚002)Vue的基本使用

    输入端在上面变化的同时,下面的内容也在变 View-->DOM监听-->指令;大括号数据 {{username}} Model-->模型(简单来说就是data,数据供view自动去读 ...

  5. arm 环境下安装selenium+chrome

    1.  升级软件 apt-get update 2. 安装pip apt-get install python3-pip 3. 安装selenium pip3 install selenium .4. ...

  6. The puzzle

    The puzzle: 传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6489 找大佬讲了一下这道题,但还是不懂为什么要这样做,先记录一下以后再研究研究; ...

  7. Matlab中的变量名

    在Matlab中使用save和load命令时,可能会出现变量名出错的问题. 如: save('A1.mat', 'A1'); load('A1.mat', 'A1'); 如果程序中还有名为a1的变量名 ...

  8. 《挑战30天C++入门极限》C++中利用构造函数与无名对象简化运算符重载函数

        C++中利用构造函数与无名对象简化运算符重载函数 在完整描述思想之前,我们先看一下如下的例子,这个例子中的加运算符重载是以非成员函数的方式出现的: //程序作者:管宁  //站点:www.cn ...

  9. el-select定义初始值并且可以修改

    [](https://img2018.cnblogs.com/blog/1338470/201811/1338470-20181112152013318-1731627947.png <el-f ...

  10. Thingsboard HTTP连接至服务器

    当布署了Thingsboard服务器后,可以通过在服务器地址后,加入swagger-ui.html来打开API文档