需求效果如下，鼠标移入图片向周围扩散，移入中间图浮现心形渐变框，注意点在中间图周围和整体的四个边的图片需要注意扩散的方向。由于一些客观原因，要求使用原生js实现，好久不写了记录一下
Screen-2022-03-23-140818.gif
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.duty_box {
width: 1184px;
height: 508px;
margin: 0 auto;
background-color: yellowgreen;
font-size: 0;
position: relative;
}
.duty_box_img {
width: 104px;
height: 60px;
position: absolute;
z-index: 0;
}
.duty_box_div_con {
width: 104px;
height: 60px;
position: relative;
}
.duty_box_div_con>img {
width: 100%;
height: 100%;
}
.duty_box_div_con_shadow::after {
position: absolute;
content: ' ';
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: dutyBoxDivConShadow .5s ease-in-out 0s forwards;
}
@keyframes dutyBoxDivConShadow {
0% {
background: rgba(212, 0, 0, .1);
}
100% {
background: rgba(212, 0, 0, .7);
}
}
.duty_box_img_zoom1 {
animation: dutyBoxImgZoom1 .2s ease-in-out 0s forwards;
z-index: 1;
}
@keyframes dutyBoxImgZoom1 {
0% {
transform: scale(1);
}
100% {
transform: scale(3.08, 3.11);
}
}
/* 中间 */
.duty_box_midImg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 124px;
}
</style>
</head>
<body>
<div class="duty_box">
<img class="duty_box_midImg" src="https://img1.baidu.com/it/u=4127991555,3421789262&fm=253&fmt=auto&app=138&f=JPEG?w=680&h=454" alt="">
</div>
</body>
</html>
<script>
var duty_box = document.querySelector('.duty_box');
for (let i = 0; i < 11; i++) {
for (let j = 0; j < 8; j++) {
if ((3 < i && i < 7) && (2 < j && j < 5)) {
continue;
}
let duty_box_img = document.createElement('div');
let duty_box_div_con = document.createElement('div');
duty_box_img.classList.add('duty_box_img');
duty_box_img._x = i;
duty_box_img._y = j;
duty_box_img.style.left = i * 108 + 'px';
duty_box_img.style.top = j * 64 + 'px';
duty_box_div_con.classList.add('duty_box_div_con');
let img = document.createElement("img");
img.src = 'https://img1.baidu.com/it/u=4127991555,3421789262&fm=253&fmt=auto&app=138&f=JPEG?w=680&h=454';
duty_box_div_con.appendChild(img)
duty_box_img.appendChild(duty_box_div_con)
duty_box.appendChild(duty_box_img)
}
}
var imgList = document.querySelectorAll('.duty_box_img');
for (let i = 0; i < imgList.length; i++) {
imgList[i].onmouseover = function() {
let x = this._x,
y = this._y;
if ([0, 10].includes(x) && [0, 7].includes(y)) {
this.style.transformOrigin = x / 10 * 100 + '% ' + y / 7 * 100 + '%';
} else if ([1, 2, 3, 4, 5, 6, 7, 8, 9].includes(x) && [0, 7].includes(y) || [0, 10].includes(x) && [1, 2, 3, 4, 5, 6].includes(y)) {
if (x == 0) this.style.transformOrigin = '0 50%';
else if (x == 10) this.style.transformOrigin = '100% 50%';
else if (y == 0) this.style.transformOrigin = '50% 0';
else if (y == 7) this.style.transformOrigin = '50% 100%';
} else if ([3, 7].includes(x) && [2, 5].includes(y)) {
if (x == 3 && y == 2) this.style.transformOrigin = '100% 100%';
else if (x == 7 && y == 2) this.style.transformOrigin = '0 100%';
else if (y == 5 && x == 3) this.style.transformOrigin = '100% 0';
else if (y == 5 && x == 7) this.style.transformOrigin = '0 0';
} else if ([4, 5, 6].includes(x) && [2, 5].includes(y) || [3, 7].includes(x) && [3, 4].includes(y)) {
if (x == 7) this.style.transformOrigin = '0 50%';
else if (x == 3) this.style.transformOrigin = '100% 50%';
else if (y == 2) this.style.transformOrigin = '50% 100%';
else if (y == 5) this.style.transformOrigin = '50% 0';
}
this.classList.add('duty_box_img_zoom1');
}
imgList[i].onmouseout = function() {
this.classList.remove('duty_box_img_zoom1')
}
}
var duty_box_midImg = document.querySelector('.duty_box_midImg');
duty_box_midImg.onmouseover = function() {
console.log('11');
for (let i = 0; i < imgList.length; i++) {
let x = imgList[i]._x,
y = imgList[i]._y;
switch (x) {
case 2:
case 8:
if ([1, 2, 3, 4].includes(y)) {
imgList[i].querySelector('.duty_box_div_con').classList.add('duty_box_div_con_shadow')
}
break;
case 3:
case 7:
if ([0, 1, 2, 3, 4, 5].includes(y)) {
imgList[i].querySelector('.duty_box_div_con').classList.add('duty_box_div_con_shadow')
}
break;
case 4:
case 6:
if ([0, 1, 2, 5, 6].includes(y)) {
imgList[i].querySelector('.duty_box_div_con').classList.add('duty_box_div_con_shadow')
}
break;
case 5:
if ([1, 2, 5, 6, 7].includes(y)) {
imgList[i].querySelector('.duty_box_div_con').classList.add('duty_box_div_con_shadow')
}
break;
default:
break;
}
}
}
duty_box_midImg.onmouseout = function() {
var duty_box_div_con_shadow = document.querySelectorAll('.duty_box_div_con_shadow');
for (let index = 0; index < duty_box_div_con_shadow.length; index++) {
duty_box_div_con_shadow[index].classList.remove('duty_box_div_con_shadow')
}
}
</script>
网友评论