【无标题】

实现风扇导航

1、技术：使用HTML5、CSS3、JS；
2、准备：风扇图，以及点击风扇出现的其他导航图标；
3、结构：

 <!-- 两个全部脱标  层级高的后写 -->
    <div id="list">
      <img src="./img/clos.png" alt="" />
      <img src="./img/full.png" alt="" />
      <img src="./img/open.png" alt="" />
      <img src="./img/prev.png" alt="" />
      <img src="./img/refresh.png" alt="" />
    </div>
    <!-- 风扇  触发点 -->
    <div id="home"></div>

  body {
        background-color: #f9f9f9;
      }
      #list {
        height: 100px;
        width: 100px;
        position: absolute;
        /* margin: 4px; */
        bottom: 0;
        right: 0;
        margin-bottom: 12px;
        margin-right: 12px;
      }
      #list > img {
        border-radius: 21px;
        position: absolute;
        transition: 0.5s all ease;
      }
      #home {
        width: 50px;
        height: 50px;
        background: url(./img/home.png) no-repeat;
        border-radius: 25px;
        position: fixed;
        bottom: 0;
        right: 0;
        margin-bottom: 10px;
        margin-right: 10px;
        transition: 1s;
      }

js部分重点讲解一下

 window.onload = function () {
        let home = document.getElementById('home') // 获取风扇键dom
        let imgs = document.getElementsByTagName('img') // 获取图标父容器dom
        let onOff = true // 定义一个标识
        let r = 150 // 定义半径
        // 2、图标展开
        // 遍历图标 给每个图标添加点击事件发生时的图标样式
        for (let i = 0; i < imgs.length; i++) {
          imgs[i].onclick = function () {
            // 添加 过渡效果
            this.style.transition = '0.3s'
            this.style.transform = 'scale(2)'
            this.style.opacity = '0'
            // 添加效果后
            addEnd(this, end)
          }
        }
        function addEnd(obj, fn) {
          console.log(obj, fn, 'addEnd')
          obj.addEventListener('transitionend', fn, false)
        }
        function end() {
          this.style.transition = '0.3s'
          this.style.transform = 'scale(2)'
          this.style.opacity = '1'
          removeEnd(this, end)
        }
        function removeEnd(obj, fn) {
          obj.removeEventListener('transitionend', fn, false)
        }
        // 1、点击风扇 弹开图标至各自的坐标
        // 坐标计算使用toLT()
        // 是否弹开 使用onOff标识
        home.onclick = function () {
          if (onOff) {
            // this指向当前dom结点
            this.style.transform = 'rotate(-720deg)'
            for (let i = 0; i < imgs.length; i++) {
              var olt = toLT(r, (90 / 4) * i)
              console.log('坐标', olt)
              imgs[i].style.transition = 0.3 + i * 0.1 + 's'
              imgs[i].style.right = olt.l + 'px'
              imgs[i].style.bottom = olt.t + 'px'
              imgs[i].style.transform = 'rotate(-720deg)'
              console.log(imgs[i])
            }
          } else {
            this.style.transform = 'rotate(720deg)'
            for (let i = 0; i < imgs.length; i++) {
              imgs[i].style.transition = 0.3 + (imgs.length - 1 - i) * 0.1 + 's'
              imgs[i].style.bottom = 0 + 'px'
              imgs[i].style.right = 0 + 'px'
              imgs[i].style.transform = 'rotate(0deg)'
              console.log(imgs[i])
            }
          }
          onOff = !onOff
        }
        // 计算图标坐标
        function toLT(iR, iDeg) {
          return {
            l: Math.round(Math.sin((iDeg / 180) * Math.PI) * iR),
            t: Math.round(Math.cos((iDeg / 180) * Math.PI) * iR),
          }
        }
      }

效果：点击风扇就会出现其他导航栏