Html
    Css
    Js

    
                        
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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

心型hover效果图(原创)

更新时间:2020-06-30 09:41:03

通过position进行定位然后对特殊的位置层次的添加z-index;然后在jquery中,我们在让鼠标接触图片时获取到下角标获取到这个图片自身是否有z-index的值,然后在离开图片时再把z-index的值再次重新赋值给当前图片;

0