Loading

旋转、跳跃

效果：
image

思路：

不想分析了，能用就行

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="shortcout icon" href="#" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .wrap {
      position: relative;
      margin: 20px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background-color: antiquewhite;
      transform: rotate(-10deg);
      transition: transform 0.25s linear;
    }
    .common {
      list-style-type: none;
      position: absolute;
      top: 0;
      left: 50%;
      width: 50px;
      height: 50px;
      transform-origin: 0 150px;
    }

    .common .image {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  </style>
  <body>
    <ul class="wrap">
      <li class="common" onclick="rotateImg(0)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(1)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(2)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(3)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(4)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(5)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(6)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(7)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(8)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(9)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(10)"><div class="image"></div></li>
      <li class="common" onclick="rotateImg(11)"><div class="image"></div></li>
    </ul>
    <script>
      let wrap = document.getElementsByClassName('wrap')[0];
      let common = document.getElementsByClassName('common');
      let image = document.getElementsByClassName('image');
      let bgc = ["#ad6598","#c27c88","#4f383e","#de7897","#681752","#61649f","#66a9c9","#cdd1d3","#83a78d","#e4bf11","#f8e0b0","#cf7543"]
      Array.prototype.forEach.call(image, (ele, index) => {
        ele.style.background = `${bgc[index]}`;
      });
      Array.prototype.forEach.call(common, (ele, index) => {
        let rotateAngle = index * 30;
        ele.style.transform = 'rotate(' + rotateAngle + 'deg)';
        ele.childNodes[0].style.transform = 'rotate(' + (-rotateAngle + 10) + 'deg)';
      });

      let currentIndex = 0;
      let inial = 10; //旋转初始角度
      function rotateImg(index) {
        if (index == currentIndex) return;
        let currentRoate = index * 30;
        let gap = 360 - currentRoate - 10;
        currentIndex = index;
        wrap.style.transform = 'rotate(' + gap + 'deg)';

        Array.prototype.forEach.call(image, function (ele, i) {
          ele.style.transform = 'rotate(' + (360 - gap - i * 30) + 'deg)';
        });
      }

      let startx, starty, endx, endy;

      //滑动
      wrap.addEventListener('touchstart', (e) => {
        startx = e.touches[0].pageX;
        starty = e.touches[0].pageY;
      });
      wrap.addEventListener('touchend', (e) => {
        endx = e.changedTouches[0].pageX;
        endy = e.changedTouches[0].pageY;

        //判断滑动
        let dx = startx - endx;
        let dy = starty - endy;
        if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return;
        }

        let nextIndex = 0;
        //判断旋转方向
        let angle = (Math.atan2(dy, dx) * 180) / Math.PI;
        if (angle >= -45 && angle < 45) {  
          //右滑动
          nextIndex=(currentIndex+1)%12;
          
        }else if((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)){
          //左滑动
          nextIndex=(currentIndex-1)%12;
        }
        rotateImg(nextIndex);
      });
    </script>
  </body>
</html>
posted @ 2023-03-07 16:29  淡蓝色的点  阅读(37)  评论(0)    收藏  举报