jq制作扑克牌图片切换 --

扑克图片切换：

//点击图片和顶层图片交换位置
    $(function () {
        $(".pic").click(function () {
            $(".pic[title]").stop(true,true);
            $(this).stop(true,true);
            let left1 = $(this).offset().left; //获取当前点击得图片的left值
            let top1 = $(this).offset().top;    //获取当前点击得图片的top值
            let zindex1 = $(this).css("z-index");

            let left2 = $(".pic[title]").offset().left;
            let top2 = $(".pic[title]").offset().top;
            let zindex2 = $(".pic[title]").css("z-index");

            $(".pic[title]").animate({"left":left1,"top":top1},1000).css("z-index",zindex1).removeAttr("title")
            $(this).animate({"left":left2,"top":top2},1000).css("z-index",zindex2).attr("title","")
        })
    })

<div class="container">
    <div class="pic pic1">
        <img src="image/1.jpg">
    </div>
    <div class="pic pic2">
        <img src="image/2.jpg">
    </div>
    <div class="pic pic3">
        <img src="image/3.jpg">
    </div>
    <div class="pic pic4">
        <img src="image/4.jpg">
    </div>
    <div class="pic pic5" title="">
        <img src="image/5.jpg">
    </div>
</div>

 .container{
            position: relative;
        }
        .pic{
            position: absolute;
        }
        .pic1{
            top: 50px;    left: 50px;     z-index: 1;
        }
        .pic2{
            top: 50px;    left: 690px;    z-index: 1;
        }
        .pic3{
            top: 100px;   left: 210px;   z-index: 2;
        }
        .pic4{
            top: 100px;    left: 530px;  z-index: 2;
        }
        .pic5{
            top: 152px;   left: 370px;   z-index: 3;
        }
        .pic img{
            padding: 10px;  background-color: #fff;  border-radius: 10px;
            box-shadow: 10px 10px 10px  #ffc;   cursor: pointer;
            width: 200px;   height: 300px;
        }