Home > Article > Web Front-end > Sharing examples of how jQuery realizes the positive and negative flip effects of poker cards

Sharing examples of how jQuery realizes the positive and negative flip effects of poker cards

小云云Original: 2018-05-17 17:18:342314browse

This article mainly introduces examples of jQuery realizing the positive and negative flip effects of poker. Has very good reference value. Let's take a look with the editor below, I hope it can help everyone.

Rendering:

The code is as follows:

<!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>
 <p class="demo1">
 <p class="front">正面正面正<br/>面正面正面<br/></p>
 <p class="behind">背面</p>
 </p>
 <p class="demo1">
 <p class="front">正面</p>
 <p class="behind">背面</p>
 </p>
 <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>
 <p class="demo2">
 <p class="front">正面</p>
 <p class="behind">背面</p>
 </p>
 <p class="demo2">
 <p class="front">正面</p>
 <p class="behind">背面</p>
 </p>
<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: &#39;enter&#39; &#39;leave&#39; 判断鼠标移入移出
 @speed: 速度 不填默认速度80 建议不要超过100
 */
 var OverTurnAnimate = function(front, behind, direction, dis, mouse, speed){
 /*判断移入移出*/
 var $front = (mouse == &#39;enter&#39;) ? front : behind,
 $behind = (mouse == &#39;enter&#39;) ? behind : front;
 $front.stop();
 $behind.stop();
 if(direction == &#39;x&#39;){
 $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
 $(&#39;.demo1&#39;).OverTurn(@direction, @speed);
 @direction(String)必选 &#39;y&#39; || &#39;x&#39; 方向
 @speed(Number)可选 速度
 */
 $.fn.OverTurn = function(direction, speed) { 
  /*配置参数*/
  if(direction!=&#39;x&#39; && direction!=&#39;y&#39;){throw new Error(&#39;OverTurn arguments error&#39;);}
  $.each(this, function(){
  var $this = $(this),
  $front = $this.find(&#39;.front&#39;),
  $behind = $this.find(&#39;.behind&#39;),
  dis = (direction==&#39;x&#39;) ? $this.width() :$this.height(),
  s = Number(speed) || 80;/*默认速度80 建议不要超过100*/
  $this.mouseenter(function() {
  OverTurnAnimate($front, $behind, direction, dis, &#39;enter&#39;, s);
 }).mouseleave(function() {
  OverTurnAnimate($front, $behind, direction, dis, &#39;leave&#39;, s);
 });
  });
 };
})(jQuery);
/*插件引用方法y*/
$(&#39;.demo1&#39;).OverTurn(&#39;y&#39;,100);/*speed不填默认速度80 建议不要超过100*/
/*插件引用方法x*/
$(&#39;.demo2&#39;).OverTurn(&#39;x&#39;);
</script>
</body>
</html>

Related Recommended:

CSS3 to achieve dynamic card flopping effect

10 content recommendations for 3D card flopping

jQuery Method to realize personalized flip effect navigation menu_jquery

The above is the detailed content of Sharing examples of how jQuery realizes the positive and negative flip effects of poker cards. For more information, please follow other related articles on the PHP Chinese website!

jquery css3

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：ThinkPHP and jquery implement loading to explain more examplesNext article：ThinkPHP and jquery implement loading to explain more examples

See more

Sharing examples of how jQuery realizes the positive and negative flip effects of poker cards

Related articles