body {
overflow:hidden;
}
.aixin {
width:1180px;
height:850px;
margin:50px auto 0;
position:relative;
}
.aixin img {
box-shadow:20px 20px 30px 0px rgba(0,0,0,0.6);
transition:all 0.6s;
}
.aixin img:nth-child(1) {
width:252px;
height:144px;
position:absolute;
top:0%;
left:9.07%;
}
.aixin img:nth-child(2) {
width:203px;
height:203px;
position:absolute;
top:0%;
right:20.08%;
z-index:3;
}
.aixin img:nth-child(3) {
width:200px;
height:200px;
position:absolute;
top:12.11%;
left:4.41%;
}
.aixin img:nth-child(4) {
width:128px;
height:128px;
position:absolute;
top:37.66%;
left:0%;
}
.aixin img:nth-child(5) {
width:153px;
height:206px;
position:absolute;
top:38.95%;
left:14.32%;
z-index:2;
}
.aixin img:nth-child(6) {
width:96px;
height:96px;
position:absolute;
top:56.42%;
left:11.61%;
}
.aixin img:nth-child(7) {
width:153px;
height:203px;
position:absolute;
top:10.79%;
left:42.63%;
z-index:5;
}
.aixin img:nth-child(8) {
width:201px;
height:115px;
position:absolute;
top:21.58%;
left:53.31%;
z-index:3;
}
.aixin img:nth-child(9) {
width:96px;
height:96px;
position:absolute;
top:37.61%;
left:49.58%;
z-index:6;
}
.aixin img:nth-child(10) {
width:136px;
height:182px;
position:absolute;
top:13.55%;
right:16.53%;
z-index:2;
}
.aixin img:nth-child(11) {
width:200px;
height:200px;
position:absolute;
top:6.45%;
right:5.34%;
z-index:1;
}
.aixin img:nth-child(12) {
width:99px;
height:99px;
position:absolute;
top:27.89%;
right:0%;
z-index:2;
}
.aixin img:nth-child(13) {
width:93px;
height:93px;
position:absolute;
top:34.34%;
right:14.32%;
z-index:0;
}
.aixin img:nth-child(14) {
width:228px;
height:128px;
position:absolute;
top:47.08%;
right:7.2%;
z-index:5;
}
.aixin img:nth-child(15) {
width:96px;
height:96px;
position:absolute;
top:57.92%;
right:9.41%;
}
.aixin img:nth-child(16) {
width:114px;
height:152px;
position:absolute;
top:57.79%;
left:69.75%;
}
.aixin img:nth-child(17) {
width:96px;
height:96px;
position:absolute;
top:80.37%;
left:45.85%;
z-index:4;
}
.aixin img:nth-child(18) {
width:401px;
height:228px;
position:absolute;
top:57.5%;
left:32.88%;
z-index:3;
}
.aixin img:nth-child(19) {
width:125px;
height:167px;
position:absolute;
top:56.42%;
left:24.83%;
z-index:2;
}
.aixin img:nth-child(20) {
width:136px;
height:182px;
position:absolute;
top:11.97%;
left:23.9%;
}
.aixin img:nth-child(21) {
width:153px;
height:206px;
position:absolute;
top:19.87%;
left:30.85%;
z-index:5;
}
.aixin img:nth-child(22) {
width:252px;
height:144px;
position:absolute;
top:35.5%;
left:24.49%;
z-index:5;
}
.aixin img:nth-child(23) {
width:271px;
height:152px;
position:absolute;
top:42.92%;
left:37.63%;
z-index:5;
}
.aixin img:nth-child(24) {
width:203px;
height:203px;
position:absolute;
top:42.16%;
left:54.75%;
z-index:5;
}
更新时间:2020-06-30 09:41:03
通过position进行定位然后对特殊的位置层次的添加z-index;然后在jquery中,我们在让鼠标接触图片时获取到下角标获取到这个图片自身是否有z-index的值,然后在离开图片时再把z-index的值再次重新赋值给当前图片;