tape-script.txt

const createTapeButton = document.getElementById('create-tape');
    createTapeButton.addEventListener('click', () => {
        const tape = createTape('test', 'test', './src/tape-cover.png');
        document.querySelector('.swiper-container').appendChild(tape);
    });
    function createTape(title, subtitle, imgPath) {
        const tape = document.createElement('div');
        tape.className = 'tape-container';
        tape.innerHTML = `
      <!-- -磁带开始 -->
      <div class="tape-container">
        <!-- 点击区域 -->
        <div class="tape-click-area">
        </div>
        <!-- -磁带脊柱 -->
        <div class='tape-spine'>
          <img src="./src/tape-spine.png" alt="tape-spine">
          <div class="tape-spine-cover  fit-parent-width" style="background-image: url(${imgPath});">
            <!-- 白色衬底 -->
            <div class="tape-spine-cover-mask"></div>
          </div>
          <p class="tape-spine-text font-num">${title}</p>
        </div>
        <!-- -磁带封面 -->
        <!-- 结构为：tape-box > tape-cover-container -->
        <!-- tape-box > tape-body -->
        <div class="tape-box">
          <div class="tape-cover-container">
            <img src="./src/tape-mask.png" alt="tape-mask">
            <div class="tape-cover fit-parent-width" style="background-image: url(${imgPath});">
            </div>
            <!-- 文本 -->
            <p class="tape-cover-title font-num">${title}</p>
            <p class="tape-cover-subtitle font-hongmeng">${subtitle}</p>
          </div>
          <!-- -磁带本体 -->
          <div class="tape-body fit-parent-width"></div>
        </div>
      </div>
      <!-- -磁带结束 -->
        `;

        //事件绑定
        initTapeEvent(tape);
        return tape;
    }



//-轮换预设卡片相关
    const translateToDegree = (tape, rotationAngle) => {
        const spine = tape.querySelector('.tape-spine');
        const box = tape.querySelector('.tape-box');
        //debug
        console.log(`tape:${tape}spine:${spine} box:${box}`);
        //打印tape的所有子元素
        //debug
        console.log(tape.children);

        spine.animate([
            { transform: `${spine.style.transform}` },
            { transform: `perspective( 500px ) rotateY(${rotationAngle}deg)` },
        ], {
            duration: 700,
            easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
            iterations: 1
        });

        spine.style.transform = `perspective( 500px ) rotateY(${rotationAngle}deg)`;

        box.animate([
            { transform: `${box.style.transform}` },
            { transform: `perspective( 500px ) rotateY(${90 + rotationAngle}deg)` },
        ], {
            duration: 700,
            easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
            iterations: 1
        });

        box.style.transform = `perspective( 500px ) rotateY(${90 + rotationAngle}deg)`;

        //调整可点击区域
        const tapeClickArea = tape.querySelector('.tape-click-area');
        //整个形状围绕 20%  处旋转，所以说点击区域从 0% 到 20% 为tape-cover，从 20% 到 100% 为tape-spine
        //其中，因为旋转，左边缘会向右移动，实际宽度为 20% * cos(rotationAngle) + 80%*sin(rotationAngle)
        const spineOriginalWidth = 70;
        const boxOriginalWidth = 240;
        tapeClickArea.style.width = `${spineOriginalWidth * Math.abs(Math.cos(rotationAngle * Math.PI / 180)) + boxOriginalWidth * Math.abs(Math.sin(rotationAngle * Math.PI / 180))}px`;
        tapeClickArea.style.left = `${spineOriginalWidth - spineOriginalWidth * Math.abs(Math.cos(rotationAngle * Math.PI / 180))}px`;

        // tape.style.marginLeft = `${-spineWidth*(1-Math.abs(Math.cos(rotationAngle*Math.PI/180))) + 10}px`;
        // tape.style.marginRight = `${-boxWidth*(1-Math.abs(Math.sin(rotationAngle*Math.PI/180))) + 10}px`;
        //debug
        //console.log(`marginLeft:${spineWidth-spineWidth*Math.abs(Math.cos(rotationAngle*Math.PI/180))} marginRight:${boxWidth - boxWidth*Math.abs(Math.sin(rotationAngle*Math.PI/180))}`);

        setTimeout(() => {
            let spineWidth = spine.getBoundingClientRect().width;
            let boxWidth = box.getBoundingClientRect().width;
            tapeClickArea.style.width = `${spineWidth + boxWidth}px`;
            tapeClickArea.style.left = `${spineOriginalWidth - spineWidth}px`;
        }, 700);
    }

    function initTapeEvent(container) {
        const mouseoverEvent = () => {
            //将其子元素tape-cover左移，tape-body右移，以展示tape-body的内容
            container.querySelector('.tape-cover-container').style.transform = 'translateX(-40%)';
            //增加过渡动画
            container.querySelector('.tape-cover-container').style.transition = 'transform 0.5s';

            //spine也左移
            //container.querySelector('.tape-spine').style.transform = 'translateX(-40%)';
            //增加过渡动画
            container.querySelector('.tape-spine').style.transition = 'transform 0.5s';

            container.querySelector('.tape-body').style.transform = 'translateX(40%)';
            //增加过渡动画
            container.querySelector('.tape-body').style.transition = 'transform 0.5s';
        }

        const mouseoutEvent = () => {
            container.querySelector('.tape-cover-container').style.transform = 'translateX(0)';
            container.querySelector('.tape-spine').style.transform += 'translateX(0)';
            container.querySelector('.tape-body').style.transform = 'translateX(0)';
        }

        container.clicked = false;
        const offAngle = 0;
        const onAngle = -90;
        translateToDegree(container, offAngle);

        const tapeClickArea = container.querySelector('.tape-click-area');
        //点击时，切换展示 侧面tape-spine 或者 tape-cover。
        tapeClickArea.addEventListener('click', () => {
            //debug
            console.log("clicked tapeContainer");

            if (!container.clicked) {
                //spine向后折叠，cover向前展开，container向左移动
                translateToDegree(container, onAngle);

                container.style.transform = 'translateX(-50%)';
                container.style.transition = 'transform 0.7s';


                //延时0.7s，增加鼠标移入移出事件
                mouseoutEvent();

                setTimeout(() => {
                    container.addEventListener('mouseover', mouseoverEvent);
                    container.addEventListener('mouseout', mouseoutEvent);
                    container.clicked = true;
                }, 700);

            }
            else {
                //移除鼠标移入移出事件
                container.removeEventListener('mouseover', mouseoverEvent);
                container.removeEventListener('mouseout', mouseoutEvent);
                mouseoutEvent();


                //spine向前展开，cover向后折叠
                translateToDegree(container, offAngle);

                container.style.transform = 'translateX(0)';
                container.style.transition = 'transform 0.7s';

                container.clicked = false;
            }
        }
        );
    }

    const tapeContainer = document.querySelectorAll('.tape-container');
    tapeContainer.forEach(container => initTapeEvent(container));

    const tapeClickArea = document.querySelectorAll('.tape-click-area');
    tapeClickArea.forEach(area => {
    }
    );

    //当鼠标移出swipe-container时，恢复tape-container的缩放比例
    const swiperContainer = document.querySelector('.swiper-container');
    swiperContainer.onmouseleave = () => {
        const tapeContainer = document.querySelectorAll('.tape-container');
        for (let i = 0; i < tapeContainer.length; i++) {
            tapeContainer[i].style.transform = 'scale(1)';
            tapeContainer[i].style.transition = 'transform 0.5s';
        }
    }