里面有两个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. 使用bufio包和函数式变成实现类似python生成器效果

    package main import ( "bufio" "fmt" "io" "strings" ) type in ...

  2. 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 ...

  3. logo的一般做法

    <body> <!-- h1里面嵌套a,并且有网站名,方便seo --> <h1> <a href="#">小米官网</a&g ...

  4. P3723 【[AH2017/HNOI2017]礼物】

    被某大佬指出这是多项式板子!? 我们假设我们原始数列是\(a_i, c_i\), 旋转后的数列是\(a_i, b_i\),我们的增加量为x \[\sum_{i = 1}^n(a_i - b_i + x ...

  5. LeetCode算法题-链表类

    1.将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. (可以参照第2的merge2List实现) 示例: 输入:1->2->4, 1->3 ...

  6. 第12组 团队Git现场编程实战

    分工及贡献 组内有三人去考证了,只剩下6人 组员 分工 贡献比例 王永福 前后端,爬虫,博客主体 30% 孙承恺 建模,算法设计,统筹 18% 邱畅杰 爬虫 15% 徐祖豪 前端数据可视化 13% 张 ...

  7. Android中显式意图和隐式意图的区别

    1.显式意图 可以直接通过名称开启指定的目标组件: 通过构造方法Intent(Context packageContext,class<?>cls)来实现. button_1 = (But ...

  8. 小程序中嵌套的h5页面设置分享转发

    场景描述:当在小程序中打开h5页面时,希望小程序的转发出去的标题,图片,跳转link可以通过h5通信实现自定义. 实现方式:通过h5给小程序通信,发送标题,图片,跳转link等信息,让小程序设置分享. ...

  9. python 生成 pyc 文件

    以 pyc 为扩展名的是Python的编译文件.其执行速度快于 py 文件且不能用文本编辑编辑查看.所以 pyc 文件往往代替 py 文件发布. Python 在执行时,首先会将 py 文件中的源代码 ...

  10. Apollo的基本使用及常见问题

    1. 创建项目 在创建项目页面中填写相关项目信息,最后点击提交即可创建项目. 注意:应用Id必须唯一并且与客户配置的app.id一致. 2. 发布 进入对应项目可通过文本(批量)或者表格模式添加配置, ...