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


Posted in Javascript onMarch 10, 2017

效果图:

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

代码如下:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery ui插件的使用方法代码实例
May 08 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 #Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 #Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 #Javascript
Vue.js之slot深度复制详解
Mar 10 #Javascript
JS实现的自动打字效果示例
Mar 10 #Javascript
jquery实现的table排序功能示例
Mar 10 #Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 #Javascript
You might like
php自动适应范围的分页代码
2008/08/05 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
php 删除cookie方法详解
2014/12/01 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python实现程序重启和系统重启方式
2020/04/16 Python
python中如何写类
2020/06/29 Python
为什么要用EJB
2014/04/17 面试题
给排水工程师岗位职责
2013/11/21 职场文书
给朋友的道歉信
2014/01/09 职场文书
打架检讨书50字
2014/01/11 职场文书
感恩的演讲稿
2014/05/06 职场文书
先进教师事迹材料
2014/12/16 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS