Teilen Sie Beispiele dafür, wie jQuery die positiven und negativen Flip-Effekte von Pokerkarten realisiert-js-Tutorial-php.cn

Teilen Sie Beispiele dafür, wie jQuery die positiven und negativen Flip-Effekte von Pokerkarten realisiert

小云云

Freigeben： 2018-05-17 17:18:34

Original

2356 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich Beispiele dafür vorgestellt, wie jQuery die positiven und negativen Umkehreffekte von Poker erkennt. Hat einen sehr guten Referenzwert. Werfen wir einen Blick mit dem folgenden Editor. Ich hoffe, er kann allen helfen.

Rendering:

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Verwandte Empfehlungen:

CSS3 zur Erzielung eines dynamischen Karten-Flip-Effekts

10 Inhaltsempfehlungen für 3D-Karten-Flop

JQuerys Methode zur Implementierung eines personalisierten Flip-Effekt-Navigationsmenüs_jquery

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele dafür, wie jQuery die positiven und negativen Flip-Effekte von Pokerkarten realisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!