current position:Home>JS part of the code, do not understand

JS part of the code, do not understand

2022-01-26 23:38:19 CSDN Q & A

{  const side1 = doc.querySelectorAll('.side1-id');  const side2 = doc.querySelectorAll('.side2-id');  const side3 = doc.querySelectorAll('.side3-id');  const side4 = doc.querySelectorAll('.side4-id');  const bigImgItem = doc.querySelectorAll('.main-3-item');  const imgText = doc.querySelectorAll('.img-text');  const iconBox = doc.querySelectorAll('.text-icon-box');  const none = 'content-none';  const anim = 'cb-anim';  const animScaleSpring = 'cb-anim-scaleSpring'  let currentIndex = 0;  const arr = [    [side1[0], side1[1]],    [side2[0], side2[1]],    [side3[0], side3[1]],    [side4[0], side4[1]]  ]  let currentZIndexArr = ['z-index1', 'z-index2', 'z-index3', 'z-index4'];  let newZIndexArr = [];  function gec(select,index, fn){    select.onmouseenter = function(){      fn(index)    }  }  function replaceZindex(currentZIndexArr, newZIndexArr){    for(let i = 0; i < 4; ++i){      bigImgItem[i].classList.replace(currentZIndexArr[i], newZIndexArr[i]);    }  }  function change(index){        let valueArr = [];    imgText[currentIndex].classList.remove(anim, animScaleSpring);    imgText[currentIndex].classList.add(none);    iconBox[currentIndex].classList.add(none);    valueArr = arr[currentIndex];    for(let i = 0; i < 2; ++i){      valueArr[i].classList.remove(none)    }    currentIndex = index; // Index of currently displayed pictures     valueArr = arr[currentIndex];    console.log(valueArr)    for(let i = 0; i < 2; ++i){      valueArr[i].classList.add(none)    }        switch(index){      case 0:        newZIndexArr = ['z-index1', 'z-index2', 'z-index3', 'z-index4'];        replaceZindex(currentZIndexArr,newZIndexArr)        currentZIndexArr = newZIndexArr;        break;      case 1:        newZIndexArr = ['z-index2', 'z-index1', 'z-index3', 'z-index4'];        replaceZindex(currentZIndexArr,newZIndexArr)        currentZIndexArr = newZIndexArr;        break;      case 2:        newZIndexArr = ['z-index3', 'z-index2', 'z-index1', 'z-index4'];        replaceZindex(currentZIndexArr,newZIndexArr)        currentZIndexArr = newZIndexArr;        break;      case 3:        newZIndexArr = ['z-index4', 'z-index3', 'z-index2', 'z-index1'];        replaceZindex(currentZIndexArr,newZIndexArr)        currentZIndexArr = newZIndexArr;        break;    }    imgText[currentIndex].classList.remove(none);    iconBox[currentIndex].classList.remove(none);    imgText[currentIndex].classList.add(anim, animScaleSpring);  }  gec(side1[0],0, change)  gec(side1[1],0, change)  gec(side2[0],1, change)  gec(side2[1],1, change)  gec(side3[0],2, change)  gec(side3[1],2, change)  gec(side4[0],3, change)  gec(side4[1],3, change)    // Change the height according to the window size   changeHeight()  function changeHeight(){    const imgItemBox = doc.querySelector('.img-item-box')    const imgItemBoxHeight = bigImgItem[0].offsetHeight + 1;    imgItemBox.style.cssText += `; height: ${imgItemBoxHeight + 'px'};`;  }    window.onresize = function(){    changeHeight()  }}



Refer to the answer 1:

What don't you understand ?




Refer to the answer 2:

copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262338173259.html

Random recommended