里面有两个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. Tensorflow细节-P170-图像数据预处理

    由于6.5中提出的TFRecord非常复杂,可扩展性差,所以本节换一种方式 import tensorflow as tf from tensorflow.examples.tutorials.mni ...

  2. java.util.Properties 读取配置文件中的参数

    用法 getProperty方法的返回值是String类型. java.util.Properties 读取配置文件中的参数 //读取配置文件 FileInputStream inStream = n ...

  3. 留言板welcome here friends！

    欢迎留言!!! 另附本人信息栏 \(cnblogs\): ShineEternal \(洛谷\):vercont \(CSDN\) \(blog\): ShineEternal \(github\) ...

  4. Python3文件

    open()方法 Python open()方法永于打开一个文件,并返回文件对象,并对文件进行处理过程中都需要用到这个方法,如果该文件无法被打开,则抛出OSError 注意:使用open()方法一定要 ...

  5. ubuntu之路——day5(今天看了浅层神经网络的数学推导过程)

    1.初始化 2.前向传播 导数比较好理解 3.反向传播 全符号积分的推导看得我头有点晕 最后唤起我依稀的线代回忆 感谢吴恩达老师的反向传播讲解,第一遍看的有点晕,然后仔细看了一下又找了个B站的推导就懂 ...

  6. cookie 的HttpOnly 和 Secure 属性

    设置HttpOnly=true的cookie不能被js获取到,无法用document.cookie打出cookie的内容. Secure属性是说如果一个cookie被设置了Secure=true,那么 ...

  7. Jar hell问题以及解放方法

    当一个类或一个资源文件存在多个jar中,就好存在jar hell问题 可以通过以下代码来诊断问题:

  8. REDIS中加锁和解锁问题

    使用lua+redis的方法.之所以使用lua是为了保证原子性 问题: 1. redis发现锁失败了要怎么办?中断请求还是循环请求?2. 循环请求的话,如果有一个获取了锁,其它的在去获取锁的时候,是不 ...

  9. linux: E: Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)

    今天在使用ubuntu执行下列指令的时候出现了错误: sudo apt-get update 解决办法: 输入以下命令: sudo rm /var/cache/apt/archives/lock su ...

  10. C++中的break、continue、goto语句

    break.continue.goto break用于提前结束循环.只能打断一层循环.是把一层循环全部结束掉.continue则是提前结束循环内单次,继续循环下一步.