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

2019-04-15 14:01发布

站内文章 / PIC单片机
16392 0 914
扑克图片切换： //点击图片和顶层图片交换位置 $(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","") }) })
.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; }  

热门文章