jQuery实现扑克正反面翻牌效果

效果图：

代码如下：

！DOCTYPEhtml头元http-equiv='内容-类型' Content=' text/html；charset=utf-8'/title【JQuery插件】扑克正反面翻牌效果/title style * { margin 33600 px；padding:0pxlist样式的： nonefont-size : 16px}/风格/头身风格。演示1 {边距336010 px宽度： 200像素；高度： 100像素；文本对齐：中心；相对位置：} .demo1 .前{宽度： 200像素高度： 100像素；位置：绝对；left:0pxtop:0px背景色： # 000;color: # fff} .demo1 .在{宽度： 200像素高度： 0px位置：绝对；left:0pxtop:50px背景色： # CCCcolor: # 000display:无；} /style h1demo1 y轴(css布局提示：背面默认隐藏高度为0个顶部是高度的一半也就是演示中间)/h1 div class=' demo 1 ' div class=' front '正面正面正br/面正面正面br///div class=' behind '背面/div/div class=' demo 1 ' div class=' front '正面/div div class='behind '背面/div/div样式。演示2 {边距336010 px宽度： 200像素；高度： 100像素；文本对齐：中心；相对位置：} .demo2 .前{ width : 200 pxz-index : 1；高度： 100像素；位置：绝对；left:0pxtop:0px背景色： # 000;color: # fff} .demo2 .在{ width : 0；高度： 100像素；z-index : 0；位置：绝对；左侧：100pxtop:0背景色： # CCCcolor: # 000} /style h1demo2 x轴(css布局提示：背面默认隐藏宽度为向左0是宽度的一半也就是演示中间)/h1 div class=' demo 2 ' div class=' front '正面/div div class='behind '背面/div/div class=' demo 2 ' div class=' front '正面/div div class='behind '背面/div/div脚本类型=' text/JavaScript ' src=' http :http://static。cnmo-img。com。cn/js/jquery144 p . js '/script脚本脚本(函数($){/*==========================================================================插件】扑克翻牌效果@auther刘明@博客http://www.cnblogs.com/dtdxrk/=======================================================================@ front :正面元素@落后：背面元素@direction:方向@dis:距离@mouse: "输入"或"离开"判断鼠标移入移出@speed:速度不填默认速度80 建议不要超过100 */var OverTurnAnimate=函数（前、后、方向、dis、鼠标、速度){ /*判断移入移出*/var $front=(鼠标=='输入')？ 前面：后面，$后面=(鼠标=='回车')?后面：前面；$前置。stop()；落后一美元。stop()；if(方向==' x '){ $ front。动画({ left : dis/2，width: 0})、速度、功能(){ $ front。hide()；$behind.show().动画({left: 0，width: dis}，speed)；});} else { $ front。动画({ top : dis/2，height: 0}，速度，功能(){ $ front。hide()；$behind.show().动画({top: 0，height: dis}，speed)；});} };/* @ demo $(。演示1 ').覆盖(@方向，@速度);@方向（字符串)必选y' || 'x '方向@速度（数字)可选速度*/$ .fn。概述=函数（方向、速度){ /*配置参数*/if(方向！='x '方向！=' y '){ 0抛出新错误(“OVERRIDE参数错误”)；} $.每个(this，function(){ var $this=$(this)，$front=$this.find ' .front ')，$ before=$ this。查找(' .后面)，dis=(方向=='x ')？$this.width() :$this.height()，s=Number(速度)| | 80;/*默认速度80 建议不要超过100 */这个。鼠标回车(function(){ overview animate($ front，$ before，direction，dis，' enter '，s)；}).鼠标离开(function(){ override animate($ front，$behind，direction，dis，' leave '，s)；});});};})(jQuery)；/*插件引用方法y */$(。演示1 ').翻转(' y '，100)；/*速度不填默认速度80 建议不要超过100*//*插件引用方法x */$(。演示2’.翻转(' x ')；/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！