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的值再次重新赋值给当前图片;