原生js控制页面元素，动态效果：点击按钮放大其他逐渐消失

效果： 页面一排元素，点击某个元素，该元素放大，其他元素渐变消失

思路：原生js获取所有要操作的dom元素 点击元素时 将该元素设置放大效果，其他元素设置隐藏渐变

技术栈：js的dom操作；数组及拷贝；eval（）；css的动画属性等

代码：

    <div class="section_1 " onclick="mouseClick('section1'，url)">
    <div class="section_2 " onclick="mouseClick('section2')"> 
    <div class="section_3 " onclick="mouseClick('section3')">  
    <div class="section_4 " onclick="mouseClick('section4')">  
    <div class="section_5 " onclick="mouseClick('section5')"> 
    <div class="section_6 " onclick="mouseClick('section6')"> 
    <div class="section_7 " onclick="mouseClick('section7')"> 
    <div class="section_8 " onclick="mouseClick('section8')">

.section_1 {
  width: 18.23vw;
  height: 15.94vw;
  background: red;
  cursor: pointer
transform: scale(1)
}
.......

//重点来了

// 点击动画效果以及页面跳转
function mouseClick(url, a) {
  // console.log(url)
  //  获取dom元素
  const section1 = document.querySelector('.section_1')
  const section2 = document.querySelector('.section_2')
  const section3 = document.querySelector('.section_3')
  const section4 = document.querySelector('.section_4')
  const section5 = document.querySelector('.section_5')
  const section6 = document.querySelector('.section_6')
  const section7 = document.querySelector('.section_7')
  const section8 = document.querySelector('.section_8')
  console.log(eval(a))
  // 识别对应的按钮传递的参数，将参数转化为存储dom元素的变量
  const eleA = eval(a)
  // 点击时设置动画效果
  eleA.style = 'transform: scale(1.2);transition: all 0.2s linear;transitionDelay:0.1s'
  // 将dom元素做成数组处理
  const eleArray = [section1, section2, section3, section4, section5, section6, section7, section8]
  //查找目前点击的标签 
  const num = eleArray.indexOf(eleA)
  //拷贝数组
  const newELEArray = [...eleArray]
  //处理数组,减去目前选中的标签,其他元素设置透明渐变
  newELEArray.splice(num, 1)
  console.log(newELEArray)
  newELEArray.forEach((value, index) => {
    // console.log(value==eleA)
    // console.log(value)
    value.style = 'opacity:0.1;transition: all 0.3s linear'

  })
  // 定时器跳转页面
  let timer = null
  clearTimeout(timer)
  timer = setTimeout(() => {
    
    window.location.href = url
  }, 500)}