实现3D 图片轮播样式（触摸一体机浏览器存在滑动问题）

2023-11-24 23:08:52

     <div id="drag-container_view" class="padding_draw">
      <div id="drag-container">
        <div id="spin-container">
          <div v-for="image in crbList" :key="image.id" class="image_item_div"
            :style="{background:`${image.yanse}`}">
            <router-link class="image_item_div_link"
              :to="{name:'crb_detail', params: {id:image.id}}">
              <img class="image_item" :src="image.image">
              <span class="span_div"
                :style="{background:'rgba(0, 0, 0, 0.1)',border: `2px solid ${image.yanse}` }">{{ image.name }}</span>
            </router-link>
          </div>
        </div>
      </div>
      <div id="ground" />
    </div>

动态获取接口数据后执行该渲染方法即可

    crblist_3D() {
      // You can change global variables here:
      var radius = 600; // how big of the radius
      var autoRotate = true; // auto rotate or not
      var rotateSpeed = -30; // unit: seconds/360 degrees
      var imgWidth = 200; // width of images (unit: px)
      var imgHeight = 250; // height of images (unit: px)
      // Link of background music - set 'null' if you dont want to play background music

      // ===================== start =======================
      // animation start after 1000 miliseconds
      setTimeout(init, 500);

      var odrag_view = document.getElementById('drag-container_view');
      var odrag = document.getElementById('drag-container');
      var ospin = document.getElementById('spin-container');
      var aImg = ospin.getElementsByTagName('div');
      console.log('aImg===', aImg);
      var aVid = ospin.getElementsByTagName('video');
      // var aEle = [...aImg]; // combine 2 arrays
      var aEle = ospin.getElementsByTagName('div'); // combine 2 arrays

      console.log('aEle===', aEle);
      // Size of images
      ospin.style.width = imgWidth + 'px';
      ospin.style.height = imgHeight + 'px';

      // Size of ground - depend on radius
      var ground = document.getElementById('ground');
      ground.style.width = radius * 3 + 'px';
      ground.style.height = radius * 3 + 'px';

      function init(delayTime) {
        for (var i = 0; i < aEle.length; i++) {
          aEle[i].style.transform =
            'rotateY(' +
            i * (360 / aEle.length) +
            'deg) translateZ(' +
            radius +
            'px)';
          aEle[i].style.transition = 'transform 0.8s';
          aEle[i].style.transitionDelay =
            delayTime || (aEle.length - i) / 6 + 's';
        }
      }

      function applyTranform(obj) {
        // Constrain the angle of camera (between 0 and 180)
        if (tY > 180) tY = 180;
        if (tY < 0) tY = 0;

        // Apply the angle
        obj.style.transform = 'rotateX(' + -tY + 'deg) rotateY(' + tX + 'deg)';
      }

      function playSpin(yes) {
        ospin.style.animationPlayState = yes ? 'running' : 'paused';
      }

      var sX;
      var sY;
      var nX;
      var nY;
      var desX = 0;
      var desY = 0;
      var tX = 0;
      var tY = 15;

      // auto spin
      if (autoRotate) {
        var animationName = rotateSpeed > 0 ? 'spin' : 'spinRevert';
        ospin.style.animation = `${animationName} ${Math.abs(
          rotateSpeed
        )}s infinite linear`;
      }

      // setup events
      odrag_view.onpointerdown = function (e) {
        clearInterval(odrag.timer);
        e = e || window.event;
        var sX = e.clientX;
        var sY = e.clientY;

        this.onpointermove = function (e) {
          e = e || window.event;
          var nX = e.clientX;
          var nY = e.clientY;
          desX = nX - sX;
          desY = nY - sY;
          tX += desX * 0.1;
          tY += desY * 0.1;
          applyTranform(odrag);
          sX = nX;
          sY = nY;
        };
        // auto spin
        if (autoRotate) {
          var animationName = rotateSpeed > 0 ? 'spin' : 'spinRevert';
          ospin.style.animation = `${animationName} ${Math.abs(
            rotateSpeed
          )}s infinite linear`;
        }

        this.onpointerup = function (e) {
          odrag.timer = setInterval(function () {
            desX *= 0.95;
            desY *= 0.95;
            tX += desX * 0.1;
            tY += desY * 0.1;
            applyTranform(odrag);
            playSpin(false);
            if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
              clearInterval(odrag.timer);
              playSpin(true);
            }
          }, 17);
          this.onpointermove = this.onpointerup = null;
        };

        return false;
      };
      // 鼠标滚动事件兼容性 wheel、onwheel

      // 修改当前pint
      // let wheelEvent =
      //   'onwheel' in document.createElement('div')
      //     ? 'wheel' // Modern browsers support "wheel"
      //     : document.onmousewheel !== undefined
      //     ? 'mousewheel' // Webkit and IE support at least "mousewheel"
      //     : 'DOMMouseScroll'; //滚动事件的兼容

      // document.addEventListener(
      //   wheelEvent,
      //   function (e) {
      //     e = e || window.event;
      //     var d = e.wheelDelta / 20 || -e.detail;
      //     radius += d;
      //     init(1);
      //   },
      //   false
      // );
      // document.onwheel = function (e) {
      //   e = e || window.event;
      //   var d = e.wheelDelta / 20 || -e.detail;
      //   radius += d;
      //   init(1);
      // };

      // document.onmousewheel = function (e) {
      //   e = e || window.event;
      //   var d = e.wheelDelta / 20 || -e.detail;
      //   radius += d;
      //   init(1);
      // };
    },

样式：

.four-container {
  width: 100%;
  height: 100%;
  min-height: calc(100vh);
  min-width: 100%;
  border: 2px solid #ccc;
  background: url('../../../assets/page/crb_bj.png') no-repeat;
  background-size: 100% 100%;
  .more_video {
    position: absolute;
    bottom: 50px;
    right: 50px;
    height: 115px;
    width: 418px;
    z-index: 9999;
    background-color: transparent;
    border-style: none;
    background: url('../../../assets/page/crb_gkgdsp.png') no-repeat;
    background-size: 100% 100%;
  }
  .logo_view {
    width: 124px;
    height: 68px;
    float: right;
    margin-right: 100px;
  }
  body {
    height: 100%;
    /* for touch screen */
    touch-action: none;
  }

  body {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .image_item {
    width: 180px;
    height: 180px;
  }
  .padding_draw {
    padding: 20px;
  }
  #drag-container,
  #spin-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 8% auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-10deg);
    transform: rotateX(-10deg);
  }
  .image_item_div_link {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #drag-container .image_item_div {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: bottom;
    margin-top: 20px;
    // line-height: 200px;
    font-size: 20px;
    text-align: center;
    // -webkit-box-shadow: 0 0 8px #fff;
    // box-shadow: 0 0 8px #fff;
    -webkit-box-reflect: below 10px
      linear-gradient(transparent, transparent, #0005);
  }
  #drag-container .span_div {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;

    border-radius: 40px;
    padding: 10px 5px;
    margin-top: 185px;
    min-width: 80%;
    color: #fff;
    background-color: #ccc;
  }
  #drag-container .image_item_div:hover,
  #drag-container video:hover {
    -webkit-box-shadow: 0 0 15px #fffd;
    box-shadow: 0 0 15px #fffd;
    -webkit-box-reflect: below 10px
      linear-gradient(transparent, transparent, #0007);
  }

  #drag-container h1 {
    font-family: Serif;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 300px;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    color: #fff;
  }

  #ground {
    width: 1400px;
    height: 900px;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    background: -webkit-radial-gradient(
      center center,
      farthest-side,
      #9993,
      transparent
    );
  }

  @-webkit-keyframes spin {
    from {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
  }

  @keyframes spin {
    from {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
  }
  @-webkit-keyframes spinRevert {
    from {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
    to {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }
  @keyframes spinRevert {
    from {
      -webkit-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
    to {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
  }
}

pc 浏览器鼠标滑动正常

码农公寓

相关文章