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 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
jquery对表单操作2
Apr 06 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
vue通过过滤器实现数据格式化
Jul 20 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中文验证码实现示例分享
2014/01/12 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
Python实现的弹球小游戏示例
2017/08/01 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
检举信的格式及范文
2014/04/04 职场文书
旅游节目策划方案
2014/05/26 职场文书
建筑安全标语
2014/06/07 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
暖春观后感
2015/06/08 职场文书
迎国庆主题班会
2015/08/17 职场文书
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS