jquery实现扑克牌切换效果

<!DOCTYPE html>
<html>
<meta charset="utf-8">
   <title>切换效果</title>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <style type="text/css">
       .pic{ position: absolute; }
       .pic1{ top: 100px; left: 200px; z-index: 1;}
       .pic2{top:100px; left: 600px; z-index: 1;}
       .pic3{top:150px; left: 280px;z-index: 2;}
       .pic4{top:150px; left: 520px;z-index: 2;}
       .pic5{top:200px; left: 400px;z-index: 3;}
   </style>
</head>
<body>
<div class="pic pic1"><img src="home2.jpg"></div>
<div class="pic pic2"><img src="home3.jpg"></div>
<div class="pic pic3"><img src="home4.jpg"></div>
<div class="pic pic4"><img src="home5.jpg"></div>
<div class="pic pic5" title=""><img src="home6.jpg"></div>
<script type="text/javascript">
    $(function(){
       　　$(".pic").click(function(){
           $(".pic").stop(true,true); //jQuery stop() 方法用于停止动画或效果，在它们完成之前。
       　　 var offsetleft1=$(this).offset().left;
       var offsettop1=$(this).offset().top;
       var zindex1=$(this).css('z-index');
       var pic5=$("[title='']");
       var offsetleft2=pic5.offset().left;
       var offsettop2=pic5.offset().top;
       var zindex2=pic5.css('z-index');

$(this).animate({
                  'left':offsetleft2,
                  'top':offsettop2,
                  'z-index':zindex2
               },1000,function(){
                  $(this).attr('title','');
});

pic5.animate({
             'left':offsetleft1,
          'top':offsettop1,
          'z-index':zindex1
           },1000 ,function(){
              pic5.removeAttr('title');
           });
       　　});
       });

</script>
</body>
</html>

jquery实现扑克牌切换效果

猜你喜欢