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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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/09/05 PHP
php 移除数组重复元素的一点说明
2008/11/27 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP 实现缩略图
2021/03/09 PHP
javascript设计模式之解释器模式详解
2014/06/05 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python Queue模块详解
2014/11/30 Python
python正则表达式之作业计算器
2016/03/18 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
后勤工作职责
2013/12/22 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
综治宣传月活动总结
2014/04/28 职场文书
清洁工岗位职责
2015/02/13 职场文书
幼师大班个人总结
2015/02/13 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
浅谈python数据类型及其操作
2021/05/25 Python