里面有两个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. php自定义函数之变量作用域

    我们通过前面的章节函数定义部份的学习我们知道了几个不同的规矩: 函数定义时后括号里面接的变量是形式上的参数(形参),与函数体外的变量没有任何关系.仅仅是在函数内部执行大理石量具哪家好 函数内声明的变量 ...

  2. Kubernetes 学习26 基于kubernetes的Paas概述

    一.概述 1.通过以往的学习应该可以了解到k8s 和以往提到的devops概念更容易落地了.比如我们说的CI,CD,CD a.CI(Continuous Integration):持续集成 b.CD( ...

  3. 2017.10.6 国庆清北 D6T1 排序

    题目描述 小Z 有一个数字序列a1; a2; .... ; an,长度为n,小Z 只有一个操作:选 定p(1<p<n),然后把ap 从序列中拿出,然后再插⼊到序列中任意位置. 比如a 序列 ...

  4. make和rpm的编译、打包总结

    1  make工具使用 1.1 makefile基本规则 Make工具最主要也是最基本的功能就是通过makefile文件来描述源程序之间的相互关系并自动维护编译工作. Makefile的规则: tar ...

  5. 数据结构实验之排序三：bucket sort (SDUT 3400)

    桶排序: #include <stdio.h> #include <string.h> int a[5555555]; int main() { int n,m; scanf( ...

  6. [java][JEECG] Maven settings.xml JEECG项目初始化 RouYi settings.xml配置

    好吧一下是经验之谈,原本这些坑不应该躺的,从头看手册完全可以避免这些. 懒得整理了,看懂了就看,看不懂自己琢磨JEECG的帮助文档去,不过嘛我喜欢用Intelij IDEA,他里面都是别的IDE,不喜 ...

  7. ZR#1009

    ZR#1009 解法: 因为无敌的SR给了一个大暴力算法,所以通过打表发现了了一些神奇的性质,即第一行和第一列的对应位置数值相等. 我们可以通过手算得出 $ F(n) = \frac{n(n + 1) ...

  8. Django 创建数据库表

    1.连接数据库之前,我们需要在setting中修改一些内容 2.Django的表是在models中创建的,一个class代表一个数据库表 abstract是为了继承,将该基类定义为抽象类,即不必生成数 ...

  9. 解释一下 Flux

    Flux 是一种强制单向数据流的架构模式.它控制派生数据,并使用具有所有数据权限的中心 store 实现多个组件之间的通信.整个应用中的数据更新必须只能在此处进行. Flux 为应用提供稳定性并减少运 ...

  10. 项目启动报错org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.wuhongyu.mapper.OrdersMapper.selectByExample

    在用maven配置mybatis环境时出现此BindingExceptiony异常,发现在classes文件下没有mapper配置文件,应该是maven项目没有扫描到mapper包下的xml文件, 在 ...