Heim > Artikel > Web-Frontend > Teilen Sie Beispiele dafür, wie jQuery die positiven und negativen Flip-Effekte von Pokerkarten realisiert

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

小云云Original: 2018-05-17 17:18:342348Durchsuche

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>

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!

jquery css3

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：ThinkPHP und JQuery implementieren das Laden, um weitere Beispiele zu erläuternNächster Artikel：ThinkPHP und JQuery implementieren das Laden, um weitere Beispiele zu erläutern

In Verbindung stehende Artikel

Mehr sehen