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 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
详解Python的单元测试
2015/04/28 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
pandas的排序和排名的具体使用
2019/07/31 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
python 如何实现遗传算法
2020/09/22 Python
python脚本定时发送邮件
2020/12/22 Python
戴尔美国官网:Dell
2016/08/31 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
Linux机考试题
2015/10/16 面试题
公司的门卫岗位职责
2014/09/09 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
安全月宣传标语
2014/10/07 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2015年财务部工作总结
2015/04/10 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
奔腾年代观后感
2015/06/09 职场文书
保护环境的宣传语
2015/07/13 职场文书
结婚幸福感言
2015/08/01 职场文书
vue 实现上传组件
2021/05/31 Vue.js
索尼ICF-5900W收音机测评
2022/04/24 无线电