娜娜, 2021-12-16 14:32 采纳率: 100%
浏览 45
已结题

js部分代码,不明白

{
  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; //当前展示的图片索引

    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)

  
  //根据窗口大小改变高度
  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()
  }
}
  • 写回答

2条回答 默认 最新

  • 你好!机器人 2021-12-19 19:56
    关注

    doc.querySelectorAll获得属性,可以看w3c
    https://www.w3school.com.cn/js/js_switch.asp

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月27日
  • 已采纳回答 12月19日
  • 创建了问题 12月16日

悬赏问题

  • ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
  • ¥20 Java-Oj-桌布的计算
  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗?
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源
  • ¥15 安卓JNI项目使用lua上的问题
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗
  • ¥15 ikuai客户端l2tp协议链接报终止15信号和无法将p.p.p6转换为我的l2tp线路